less/sass的each用法

// example
@selectors: blue, green, red;
each(@selectors, {
  .sel-@{value} {
    a: b;
  }
})
// outputs
.sel-blue {
  a: b;
}
.sel-green {
  a: b;
}
.sel-red {
  a: b;
} =====================================
// example
@colors: {
  info: #eee;
  danger: #f00;
}
each(@colors, {
  .text-@{key} {
　　color: @value
  }
})
//outputs
.text-info {
  color: #eee;
}
.text-danger {
  color: #f00;
}

每個列表成員可以被默認綁定@value, @key, @index三個變量，對大部分的列表而言， @key和 @index會被定義為相同的值（比如以1開始的有序列表）。然而，你也可以使用規則自定義列表中的@key值

在 每個each()函數中你不必都使用@value, @key, @index作為變量名。在Less 3.7版本中，因為each()函數， Less被描述為可以接受匿名不定參數，這一特性將會擴展到其他的語法中

一個匿名不定參數可以用#()或者 .()的樣式為開頭

// example
.set-2() {
  one: blue;
  two: green;
  three: red;
}
.set-2 {
  // Call mixin and iterate each rule
  each(.set-2(), .(@v, @k, @i) {
    @{k}-@{i}: @v;
  });
}
// outputs
.set-2 {
  one-1: blue;
  two-2: green;
  three-3: red;
}

 嵌套

// margin padding 
@spacing-type: margin, padding;
@spacing-direction:  top, right, bottom, left;
@spacing-base-size: 1rem;
.spacing-sizes() {
  0: 0;
  1: 0.25;
  2: 0.5;
  3: 1;
  4: 1.5;
  5: 3;
}
each(@spacing-type, .(@type) {
  each(@spacing-direction, .(@direction) {
    each(.spacing-sizes(), {
      .@{type}-@{direction}-@{key} {
        @{type}-@{direction}: @value * @spacing-base-size;
      }
    })
  })
})

 

---

 

sass

// example
$colors: (
  info: #eee;
  danger: #f00;
)
@each $colorKey, $color in $colors{
  .text-#{$colorKey} {
　　color: @color
  }
}
//outputs
.text-info {
  color: #eee;
}
.text-danger {
  color: #f00;
}

 

 https://www.jianshu.com/p/c7c210bd25e8