Question

我有一个颜色列表，我想使用这些颜色生成类：

CSS

@color1: #b37974;
@color2: #ffa385;
@color3: #ff5500;
@color4: #b2682e;

这是我正在使用的代码：

少

.loopingClass(@index) when (@index > 0) {
  @ctype: "color@{index}";
  .setClass(@color,@cindex) {
    .btn-color-@{cindex} {
      background-color:@{color} ;
    }
  }
  .setClass(e(@@ctype),@index);
  .loopingClass(@index - 1);
};

.loopingClass(2);

当我尝试使用gulp编译代码时，收到“无法识别的输入”错误。当我删除background-color: @{color}时，错误消失了。我在这段代码中的错误是什么？

更新

正确的代码是：

.loopingClass(@index) when (@index > 0) {
  @ctype: "color@{index}";
  .setClass(@color,@cindex) {
    .btn-color-@{cindex} {
      background-color:@color ;
    }
  }
  .setClass(@@ctype,@index);
  .loopingClass(@index - 1);
};

.loopingClass(2);

Answer 1

正如我在上面的评论中已经提到的那样，错误存在于e函数中（在那里没有任何意义）。正确的代码如下所示：

@color1: #b37974;
@color2: #ffa385;
@color3: #ff5500;
@color4: #b2682e;

.loopingClass(@index) when (@index > 0) {
    @ctype: "color@{index}";
    .setClass(@color, @cindex) {
        .btn-color-@{cindex} {
            background-color: @color;
        }
    }
    .setClass(@@ctype, @index);
    .loopingClass(@index - 1);
}

.loopingClass(2);

事实上，所有这些都可以简化为：

@color1: #b37974;
@color2: #ffa385;
@color3: #ff5500;
@color4: #b2682e;

.loopingClass(@index) when (@index > 0) {
    .btn-color-@{index} {
        @color: "color@{index}";
        background-color: @@color;
    }
    .loopingClass(@index - 1);
}

.loopingClass(2);

由于您不需要通过“索引变量名称”模拟数组，所以更重要的是整个事情可能更加简单，因为您可以直接使用数组（除非您需要在其他地方单独引用这些变量）：

@colors:
    #b37974,
    #ffa385,
    #ff5500,
    #b2682e;

.loopingClass(2);
.loopingClass(@index) when (@index > 0) {
    .loopingClass(@index - 1);
    .btn-color-@{index} {
        background-color: extract(@colors, @index);
    }
}

最后（因为我进入了“优化永不结束”模式），同样的东西带有一点句法糖：

@import "for";

@colors:
    #b37974
    #ffa385
    #ff5500
    #b2682e;


.btn-color- {
    .for(@colors); .-each(@color) {
        &@{i} {background-color: @color}
    }
}

导入的for为thefor。

使用循环生成类

1 个答案: