less - Less - Strange Prepros 编译

Question

我有这个更少的代码：

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

这段代码有什么问题？

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