有没有办法循环名称/值对数组 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; }
我知道你可以for-loop an array，但我不确定它是否可以是对象数组而不是 LESS 中的值。
【问题讨论】：
标签： less
在 Less 中，一个“对”（最简单的形式）也可以表示为一个数组，所以它可以很简单：
@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”的内容仅限于 the only loop per scope，因此最好将上面的内容重写为：
@import "for";
@array: alice black, bob orange;
.cl- {
.for(@array); .-each(@value) {
@name: extract(@value, 1);
&@{name} {
background-color: extract(@value, 2);
}
}
}
可以在here 找到导入的"for" sn-p（它只是一个用于递归Less 循环的包装混合）（示例here 和here）。
【讨论】：
@seven-phases-max 给出的答案非常有效。为了完整起见，您还应该注意，您可以在 Less 中执行相同操作，而无需导入 "for" sn-p。
来自lesscss.org
尽量接近声明性 CSS, Less 选择通过受保护来实现条件执行 mixins 而不是 if/else 语句，在@media 查询的脉络中 功能规格。
和
在 Less 中，mixin 可以调用自己。这种递归混合，当结合 使用 Guard Expressions 和 Pattern Matching，可用于创建 各种迭代/循环结构。
所以在 Less 中你可以这样写：
@array: alice black, bob orange;
.createcolorclasses(@iterator:1) when(@iterator <= length(@array)) {
@name: extract(extract(@array, @iterator),1);
.cl-@{name} {
background-color: extract(extract(@array, @iterator),2);
}
.createcolorclasses(@iterator + 1);
}
.createcolorclasses();
或者确实：
@array: alice black, bob orange;
.createcolorclasses(@iterator:1) when(@iterator <= length(@array)) {
@name: extract(extract(@array, @iterator),1);
&@{name} {
background-color: extract(extract(@array, @iterator),2);
}
.createcolorclasses(@iterator + 1);
}
.cl-{
.createcolorclasses();
}
【讨论】：
这是一个“parametric mixins”，您可以将其与“key:value”对一起使用。
"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";
测试
.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
【讨论】：
虽然从其他答案中了解 Less 支持递归函数和 mixins 很有用，但对于这个简单的问题，现在有一个更更简单的答案。此解决方案经过测试可以与 Less v3.9 一起使用，但在 each was introduced 时应该可以恢复到 Less v3.7。
.array() {
alice: black;
bob: orange;
}
each(.array(), {
.cl-@{key} {
background-color: @value;
}
});
输出整齐：
.cl-alice {
background-color: black;
}
.cl-bob {
background-color: orange;
}
想要更多？好吧，正如他们所说，“你可以做更多”。使用@index 来使用上面公式中从 1 开始的索引。
【讨论】：