CSS LESS - 在循环中添加变量

Question

首先，我有不同的颜色变量：

@nav-left-color-item-1 : #e7663f;
@nav-left-color-item-2 : #69a7d9;
...
@nav-left-color-item-X : #554789;

然后，我做了一个循环来创建不同的项目，如下所示：

.generate-item(3);

.generate-item(@n, @i: 1) when (@i =< @n) {
  .item@{i} {

  }
  .generate-item(@n, (@i + 1));
}

...给它

.item1 {

}
.item2 {

}
.item3 {

}

我想做的是在每个项目中插入我的不同颜色变量，并与索引匹配... 我添加了变量 @i 而不是索引，但它不起作用...

.generate-item(3);

    .generate-item(@n, @i: 1) when (@i =< @n) {
      .item@{i} {
        @nav-left-color-item-@i ;
      }
      .generate-item(@n, (@i + 1));
    }

感谢您的帮助！

Answer 1

您可以将颜色移动到数组中，然后按索引获取，例如：

@colors: 'color-item-1' #f00, 'color-item-2' #0f0, 'color-item-3' #00f;

.generate-item(3);

.generate-item(@n, @i: 1) when (@i =< @n) {
    .item@{i} {
        color: extract(extract(@colors, @i),2);
      }
   .generate-item(@n, (@i + 1));
}

CSS LESS - 在循环中添加变量

CSS LESS - add variable in loop

css

loops

less