Question

我拥有的组都具有相同的属性但值不同。我想知道是否有一种快速遍历我的变量来创建类的方法？

@groups : 3

@group1 : #59344F
@group2 : #8BBF9F
@group3 : #857E7B


.group-loop(@i) when (@i > 0){
    .group-@{i}-colors{
        color: @group@{i}
     }
}

.group-loop(@groups);

我得到的错误是：在规则集中输入“颜色”没有可行的选择

Answer 1

您需要使用extract函数才能在特定索引处获取数组的值。

以下是文档：http://lesscss.org/functions/#list-functions-extract

因此，您必须将代码更新为以下内容：

@colorsArr : #59344F, #8BBF9F, #857E7B;


.group-loop(@colors, @index) when (@index > 0){
    .group-@{index}-colors{
        color: extract(@colors, @index)
     }

    .group-loop(@colorsArr, (@index - 1))
}

.group-loop(@colorsArr, length(@colorsArr));

我将颜色设置为数组或列表。这是一个递归循环，这是循环执行此循环的一种很好的方法。基本上，底部的.group-loop开始了循环，您可以看到我们在循环结束之前再次调用该函数，并递减索引以保持when的工作。 / p>

通过循环和变量创建类

1 个答案: