在LESS中循环访问名称值对的数组

有没有办法循环一个名称/值对的数组LESS？ 像这样的东西：

arr = alice: black, bob: orange; .for(arr) // something something // .cl-@{name} { background-color: @{value} } 

要生成这样的东西：

 .cl-alice { background-color: black; } .cl-bob { background-color: orange; } 

我知道你可以循环一个数组 ，但我不确定它是否可以是一个对象数组而不是LESS中的值。

Answer 1

@ seven-phases-max给出的答案效果很好。 为了完整起见，你还应该注意到，如果没有导入的"for"片段，你可以在Less中做同样的事情。

来自lesscss.org

在试图尽可能保持CSS的声明性质的时候，Lessselect了@media查询特性规范的方式，通过保护的mixin而不是if / else语句来实现条件执行。

和

less一个mixin可以自己调用。 这种recursion混合结合Guardexpression式和模式匹配，可以用来创build各种迭代/循环结构。

所以在更less的你可以写：

 @array: alice black, bob orange; .creatcolorclasses(@iterator:1) when(@iterator <= length(@array)) { @name: extract(extract(@array, @iterator),1); .cl-@{name} { background-color: extract(extract(@array, @iterator),2); } .creatcolorclasses((@iterator + 1)); } .creatcolorclasses(); 

或者确实：

 .creatcolorclasses(@iterator:1) when(@iterator <= length(@array)) { @name: extract(extract(@array, @iterator),1); &@{name} { background-color: extract(extract(@array, @iterator),2); } .creatcolorclasses((@iterator + 1)); } .cl-{ .creatcolorclasses(); } 

Answer 2

在一个“对”（最简单的forms）中，也可以表示为一个数组，所以它可以像下面这样简单：

 @import "for"; @array: alice black, bob orange; .for(@array); .-each(@value) { @name: extract(@value, 1); @color: extract(@value, 2); .cl-@{name} { background-color: @color; } } 

但是请注意，“.for”事物仅限于每个范围的唯一循环，所以最好重写上面的代码。

 @import "for"; @array: alice black, bob orange; .cl- { .for(@array); .-each(@value) { @name: extract(@value, 1); &@{name} { background-color: extract(@value, 2); } } } 

导入的"for"片段（它只是recursionLess循环的一个包装器mixin）可以在这里find（在这里和这里都有例子）。

Answer 3

这里是一个“ 参数混合 ”，你可以使用“键：值”对。

数组“key：value”对的定义如下：@array：“key：value”，“key：value”;

 // imported "for" snippet (it's just a wrapper mixin for recursive Less loops) // http://is.gd/T8YTOR @import "for"; // loop all items and generate CSS .generate_all(@array) { .for(@array); .-each(@item) { @name: e(replace(@item, ':(.*)', '')); @value: replace(@item, '^[^:]*:', ''); @{name} { z-index: e(@value); } } } 

定义：

 @array_test: ".test:9000", "header .mainNav:9000", "footer:8000", "li.myclass:5000"; 

testing

 .generate_all(@array); 

结果 ：

 .test { z-index: 9000; } header .mainNav { z-index: 8000; } footer { z-index: 7000; } li.myclass { z-index: 5000; } 

它适用于我使用grunt + less@1.7.4