Less - Strange Prepros 编译答案

【问题标题】：Less - Strange Prepros compilationLess - Strange Prepros 编译
【发布时间】：2015-03-29 16:15:28
【问题描述】：

我有这么少的代码：

colors : 1 #F00, 2 #0F0, 3 #00F, 4 #F0F;

.for(@colors); .-each(@values) {
    @position: extract(@values, 1);
    @color: extract(@values, 2);

    &.raster-@{position} {
        background-image: linear-gradient(#000000, @color);
    }
}

我正在使用来自 https://github.com/seven-phases-max/less.curious/blob/master/src/for.less 的 for mixin

生成的代码是：

.bg-1 {
  background-color: #ff0000 !important;
  color: extract(1 #ff0000, 3);
}
.bg-2 {
  background-color: #00ff00 !important;
  color: extract(2 #00ff00, 3);
}
.bg-3 {
  background-color: #0000ff !important;
  color: extract(3 #0000ff, 3);
}
.bg-4 {
  background-color: #ff00ff !important;
  color: extract(4 #ff00ff, 3);
}

我发现了问题。我使用 .for() 生成 .bg-xx 类。

@bgColors : red red yellow, blue blue white;

.for(@bgColors); .-each(@values) {
    @name: extract(@values, 1);
    @bgColor: extract(@values, 2);
    @color: extract(@values, 3);

    &.bg-@{name} {
        background-color: @bgColor !important;
        color: @color;
    }
}

这段代码有什么问题？

【问题讨论】：

确保不要在同一范围内运行多个.for 循环。（在您的 sn-p 中，您似乎有另一个 .for.-each 干扰了这个）。如果必须，请使用& {} (see for example) 将这些循环彼此隔离，否则所有.-each 定义相同的范围堆栈，从而使每个.for 运行每个.-each...
如果你在 Q 中放一个完整的例子，我想我可以写一个答案（例如，在该类中显示两个（或所有）循环 (.bg?)）——这样我就可以写一个修改示例。否则，用每个解决方案覆盖所有可能的“同一范围内的多个循环”陷阱变体需要太长时间。
你是对的。在另一个较小的文件中，我有 .bg-red、.bg-blue、.... 的代码。谢谢
是的，出于这个原因，尤其要在全局范围内避免循环（因为您永远不知道其他文件也可能会带入全局）。因此，如果您正在生成一些类，将类名的共享部分移出循环总是一个好主意。例如。 like this.
也不要错过"iterating through a list without loop" 设计模式。

标签： less prepros

【解决方案1】：

除了在 if-wrapper (mixin) 或 mixin 中使用“技巧”之外，您还可以考虑使用 mixins 保护来创建循环，如下所述：http://lesscss.org/features/#loops-feature

例如：

@bgColors: red red yellow, blue blue white;

.backgrounds(@colors; @iterator: 1) {

    @name: extract(extract(@colors, @iterator), 1);
    @bgColor: extract(extract(@colors, @iterator), 2);
    @color: extract(extract(@colors, @iterator), 3);

    &.bg-@{name} {
        background-color: @bgColor !important;
        color: @color;
    }

   & when (@iterator < length(@colors)) {
     .backgrounds(@colors; @iterator + 1);
   }
}
.backgrounds(@bgColors);

编译成以下 CSS 代码：

.bg-red {
  background-color: red !important;
  color: yellow;
}
.bg-blue {
  background-color: blue !important;
  color: white;
}

【讨论】：

是的，我可以使用这种循环技术，但是 .for() mixin 又短又清晰