小编ari*_*aby的帖子

使用循环生成类

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

CSS

@color1: #b37974;
@color2: #ffa385;
@color3: #ff5500;
@color4: #b2682e;
Run Code Online (Sandbox Code Playgroud)

这是我正在使用的代码:

.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);
Run Code Online (Sandbox Code Playgroud)

当我尝试使用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);
Run Code Online (Sandbox Code Playgroud)

css3 less

1
推荐指数
1
解决办法
83
查看次数

标签 统计

css3 ×1

less ×1