Question

我有一个重复多次的课程。我想根据我定义的颜色列表更改每个类的文本颜色。如果元素多于颜色，则需要重新开始颜色。这是我到目前为止所做的，但它复制了每个元素的颜色：

@colors: 'green', 'red', 'blue';

.view-priority-list-item-type {
    .for(@colors); .-each(@color) {
        color: @color;
    }
}

Answer 1

正如@ seven-phases-max的例子已经告诉你的那样，你应该试试Less list functions：

length() - ＆gt;返回值列表中的元素数。
extract() - ＆gt;返回列表中指定位置的值。请注意，第一个位置的索引为1，而非0

还有mod()函数。

比你能做的更多：

<强>少

@elements: 'one','two','thee','four';
@colors: 'green', 'red', 'blue';

.classes(@i) when (@i > 0) {
.classes((@i - 1));
@classname: e(extract(@elements,@i));
.@{classname} {
color: e(extract(@colors, mod(@i - 1,length(@colors))+1));
} 
}
.classes(length(@elements));

上面的Less代码将编译成以下CSS代码：

.one {
  color: green;
}
.two {
  color: red;
}
.thee {
  color: blue;
}
.four {
  color: green;
}

LESS：将class元素设置为数组中的值

1 个答案: