// 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; }