loops - 在 Less 中循环变量名数组

Question

在我们的应用中，我们有一个预设的颜色列表，用户可以从中进行选择，与该用户相关的所有内容都将具有该颜色。

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

例如。

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

我们在 CSS 中使用 LESS。

在许多地方，我们正在做这样的事情:

.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

参见Loops 。例如(假设 @green、@red、@blue 变量在其他地方定义):

@colors: green, red, blue;

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

- - -

在现代，在 Lists 的帮助下，“不一样”可以变得更加直接。插件:

@colors: green, red, blue;

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

- - -

在 Legacy Less 中，可以使用以下语法糖来实现:

@import "for";

@colors: green, red, blue;

.example_module {
    .for(@colors); .-each(@name) {
        &.@{name} {background: @@name}
    }
}

在哪里可以找到导入的 "for" 代码片段(它只是递归 Less 循环的包装混合)here (例如 here 和 here )。