循环遍历 Less 中的变量名数组答案

【问题标题】：Loop through array of variable names in Less循环遍历 Less 中的变量名数组
【发布时间】：2014-02-21 19:53:52
【问题描述】：

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

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

例如。

<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 是否也支持这样的功能？

【问题讨论】：

在 LESS 中可以使用递归。这在 SASS 中要简单得多。也许你听说过谷歌？ ;^)
SASS 不是要走的路。我理解为什么它看起来更容易做，但从长远来看，LESS 或 LESS fork 会在完全遵守语法的情况下出现。

标签： loops less

【解决方案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}
    }
}

可以在here 找到导入的"for" sn-p（它只是一个用于递归Less 循环的包装器mixin）（例如here 和here）。

【讨论】：

SyntaxError: Operation on an invalid type in common.less on line 6, column 3: 5 .example_module { 6 .for(@colors); .-each(@color) { 7 @name: e(@color); by lessc 1.7.5
@seyed 恐怕你需要用完整的例子创建一个新的 Q（这个 for 东西在 Less 1.5.x-2.0.x 中可以正常工作）。
@seyed 我也有这个问题。我的问题是由 rhino-less 集成的问题引起的； js.jar 和 less-rhino.x.x.x.js 脚本之间的版本冲突。
嗨，是否可以在同一个 less 文件中使用 2 个 for 循环而不生成混合类？我的意思是，我有一个带有颜色的数组，我生成背景颜色规则，我也想使用 for 生成我的 h1、h2、h3、h4、h5、h6 规则，但问题是 less 也会生成混合类没有任何意义，取两个数组并应用两个 for 循环。
@Fab 见github.com/seven-phases-max/less.curious/blob/master/articles/…

【解决方案2】：

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

定义混合：

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

【讨论】：

投反对票，因为这不是问题的答案。您要么需要修改示例以匹配 Q，要么为您的 mixin 库示例找到更合适的 Q（有很多更早且更一般的“如何循环”问题）。
另请注意，虽然基于 DR 的 .for-each 实现是自 DR 功能添加到 Less 之日起（即自 2014 年 2 月 27 日起）进行的。回答一个老问题只是为了发布另一个实现某些东西的 mixin 库的链接可能并不总是一个好主意。（供您参考：1、2 等。最后请参阅#2270，了解现在所有可能的糖技巧的摘要）。

【解决方案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;
  }
});

【讨论】：

您的回答，添加@index 解决了我的问题。谢谢。
我在最新的文档中看不到将对象传递给 each() 的能力。这是否已被弃用？
@DanaWoodman 不。它就在文档中。第二个例子。
facepalm 是的，我现在看到了，不知道我是怎么错过的。忽略我;)

【解决方案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;
  });
}

【讨论】：