在Less中循环variables名称数组

在我们的应用程序中，我们有一个用户可以select的颜色预设列表，并且与该用户相关的所有内容都将具有该颜色。

在整个应用程序中，我们将有各种模块的颜色作为类名称附加。

例如。

<div class="example_module green"> ... </div> 

我们正在使用LESS作为我们的CSS。

在很多地方，我们正在做这样的事情：

 .example_module.green { background: @green; } .example_module.red { background: @red; } .example_module.blue { background: @blue; } etc 

我想能够将所有这些颜色名称设置为一个数组，并遍历它们。 如果将来添加颜色，我们只需将它添加到一个地方。

伪代码：

 @colors: ['green', 'red', 'blue']; for each @color in @colors { .example_module.@color { background: @color; } } 

像这样的东西，甚至在LESS支持？

Answer 1

见循环 。 例如（假定@green ， @red ， @bluevariables是在别处定义的）：

 @colors: green, red, blue; .example_module { .-(@i: length(@colors)) when (@i > 0) { @name: extract(@colors, @i); &.@{name} {background: @@name} .-((@i - 1)); } .-; } 

– – –

现代在List插件的帮助下，可以更简单直观：

 @colors: green, red, blue; .for-each(@name in @colors) { .example_module.@{name} { background: @@name; } } 

– – –

在传统中减less语法糖可以使用以下方法实现：

 @import "for"; @colors: green, red, blue; .example_module { .for(@colors); .-each(@name) { &.@{name} {background: @@name} } } 

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

Answer 2

这个mixin对我来说工作的很好。 第二个参数是可以访问当前迭代elem（@value）和当前索引（@i）的代码块。

1. 定义mixin：

    .for(@list, @code) { & { .loop(@i:1) when (@i =< length(@list)) { @value: extract(@list, @i); @code(); .loop(@i + 1); } .loop(); } } 

2. 使用：

    @colors: #1abc9c, #2ecc71, #3498db, #9b59b6; .for(@colors, { .color-@{i} { color: @value; } }); 

3. 结果CSS：

    .color-1 { color: #1abc9c; } .color-2 { color: #2ecc71; } .color-3 { color: #3498db; } .color-4 { color: #9b59b6; } 

Answer 3

1. 定义mixin：

 .foreach(@list, @body, @i: length(@list)) when (@i>0) { .foreach(@list, @body, @i - 1); @n: length(@list); @value: extract(@list, @i); @body(); /* you can use @value, @i, @n in the body */ } 

2. 用法：

 .example-module { .foreach (red green blue, { &.@{value} { color: @value; } }); } 

另一个例子：

 .nth-child (@list, @style) { .foreach(@list, { @formula: e(%("%dn+%d", @n, @i)); &:nth-child(@{formula}) { @style(); } }); } tr { .nth-child (#bbb #ccc #ddd #eee, { background: @value; }); }