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

要生成类似这样的内容：

arr = alice: black, bob: orange;

.for(arr) // something something //
   .cl-@{name} {
       background-color: @{value}
   }

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

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

较小的“对”（以其最简单的形式）也可以表示为一个数组，因此它可以简单到：

@import“for”；
@阵列：爱丽丝·布莱克、鲍勃·奥兰治；
.for（@array）-每个（@value）{
@名称：提取（@value，1）；
@颜色：提取（@value，2）；
.cl-@{name}{
背景色：@色；
}
}

但是请注意“.for”的内容仅限于，因此最好将上面的内容重写为如下内容：

arr = alice: black, bob: orange;

.for(arr) // something something //
   .cl-@{name} {
       background-color: @{value}
   }

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

@import“for”；
@阵列：爱丽丝·布莱克、鲍勃·奥兰治；
.cl-{
.for（@array）；-每个（@value）{
@名称：提取（@value，1）；
&@{name}{
背景色：提取（@value，2）；
}
}
}

---

可以找到为“片段导入的

”（它只是一个用于递归较少循环的包装器mixin）（带有示例和）。
由@seven phases max给出的答案非常有效。为了完整起见，您还应该注意，您可以在不使用导入的“

代码段”的情况下以更少的时间完成相同的操作

来自lesscss.org

试图尽可能接近 CSS，Less已经选择通过保护来实现条件执行 mixin而不是if/else语句，与@media query类似 功能规格

及

在更少的情况下，mixin可以调用自己。这样的递归混合，当组合时 使用保护表达式和模式匹配，可以用于创建 各种迭代/循环结构

所以你可以用更少的时间写：

@array:alice black，bob orange；
.createcolorclasses（@iterator:1）当（@iterator这里有一个“”可以与“key:value”对一起使用

“键：值”对的数组定义如下：@Array:“键：值”、“键：值”

//导入的“for”代码段（它只是一个用于递归较少循环的包装器mixin）
// http://is.gd/T8YTOR
@进口“用于”；
//循环所有项目并生成CSS
.generate_all（@array）{
.for（@array）；
-每个（@项）{
@名称：e（替换（@item，，：（.*））；
@值：替换（@item，“^[^:::*：”，“）；
@{name}{
z指数：e（@值）；
}
}
}

定义：

@array\u 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支持递归函数和混合是很有用的，但现在这个简单问题有了一个更简单的答案。该解决方案经过测试，可以使用Less v3.9版本，但在使用时应该可以使用Less v3.7版本

输出整洁：

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

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

想要更多吗？正如他们所说，“你可以做得更多”。使用
@index
使用上面公式中基于1的索引。
@user1429980你会发现。See中的每个（或.for each）mixin也有办法在数组中仅容纳1个键/对（打算将来添加更多）？我注意到定义中是否没有逗号（即@clr\u数组：alice black）extract函数会将空格视为文档中所述的分隔符。是否有办法防止空格被视为分隔符？我想现在我只需列出元素两次，并添加注释，以便在实际有多个分隔符时删除该行。@Kerry空格分隔的列表和逗号分隔的列表之间没有区别。在无论哪种情况，上面的“对”都是一种抽象（例如，可以将对数组创建为逗号分隔的“对”的空格分隔列表等）。例如，“单对”情况需要一些特殊处理。