如何使用LESS循环构建CSS

Question

我正在尝试使用LESS循环构建具有属性的CSSclasses列表。

@values : 10, 20, 30, 40, 50, 60, 70, 80, 90;
@widths : 20, 30, 40, 45, 50, 55, 60, 70, 80;
@index : 1;

.productStar-variations( @values; @widths; @index ) when (@index < 10) {

    @value : extract(@values, @index);
    @width : extract(@widths, @index);

    .productStar-@{value}::after {
        width: @width%;
        color: @temp-primary;
    }

    .productStar-variations(@index + 1);
}

.productStar-variations(@values; @widths; @index);

预期结果应该是：

.productStar-10::after {
    width: 20%;
    color: @temp-primary;
}
.productStar-20::after {
    width: 30%;
    color: @temp-primary;
}
.productStar-30::after {
    width: 40%;
    color: @temp-primary;
}
.productStar-40::after {
    width: 45%;
    color: @temp-primary;
}
.productStar-50::after {
    width: 50%;
    color: @temp-primary;
}
.productStar-60::after {
    width: 55%;
    color: @temp-primary;
}
.productStar-70::after {
    width: 60%;
    color: @temp-primary;
}
.productStar-80::after {
    width: 70%;
    color: @temp-primary;
}
.productStar-90::after {
    width: 80%;
    color: @temp-primary;
}

但是，这会在编译时抛出错误。 没有找到匹配定义.productStar-variations(2)我似乎无法弄清楚这里发生了什么似乎比较直接。

Answer 1

为了纠正我的问题，我只需要纠正一些语法错误。

@values : 10, 20, 30, 40, 50, 60, 70, 80, 90;
@widths : 20%, 30%, 40%, 45%, 50%, 55%, 60%, 70%, 80%;
@index : 1;

.productStar-variations(@values, @widths, @index);

.productStar-variations (@values, @widths, @i) when (@i < 10) {

      @value: extract(@values, @i);
      @width: extract(@widths, @i);

     .productStar-@{value}::after {
        width: @width;
        color: @temp-primary;
     }

     .productStar-variations(@values, @widths, @i + 1);
}