在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

请参阅循环。例如（假设@green，@red，@blue变量别处定义）：

@colors: green, red, blue;

.example_module {

    .-(@i: length(@colors)) when (@i > 0) {

        @name: extract(@colors, @i);

        &.@{name} {background: @@name}

        .-((@i - 1));

    } .-;

}

---

在Modern Less中，借助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循环的包装mixin）（此处和此处都带有示例）。

Answer 2

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

定义mixin：

.for(@list, @code) {

    & {

        .loop(@i:1) when (@i =< length(@list)) {

            @value: extract(@list, @i);

            @code();

            .loop(@i + 1);

        }

        .loop();

    }

}

使用：

@colors: #1abc9c, #2ecc71, #3498db, #9b59b6;

.for(@colors, {

    .color-@{i} {

        color: @value;

    }

});

结果CSS：

.color-1 {

  color: #1abc9c;

}

.color-2 {

  color: #2ecc71;

}

.color-3 {

  color: #3498db;

}

.color-4 {

  color: #9b59b6;

}

Answer 3

使用现代的LESS（> = 3.7），可以使用内置each函数：

/* (assuming @clr-green, @clr-red, @clr-blue variables are defined elsewhere) */

@colors: {

  green: @clr-green;

  red: @clr-red;

  blue: @clr-blue;

}

each(@colors, {

  .example_module.@{key} {

    background: @value;

  }

});