css - 如何使用 LESS 循环构建 CSS

Question

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

@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);
}