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