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

- - -

在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）here（包含示例here和here）。

Answer 2

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

Answer 4

定义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 */
}

用法：

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

在Less中循环遍历变量名称数组

4 个答案:

- - -

- - -