Как создать CSS с LESS петлей - PullRequest
Новая
       16

Как создать CSS с LESS петлей

0 голосов
/ 20 мая 2019

Я пытаюсь составить список классов CSS со свойствами, используя цикл LESS. 

@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) Кажется, я не могу понять, что здесь происходит, это кажется относительно простым.

1 Ответ

0 голосов
/ 20 мая 2019

Чтобы исправить мою проблему, мне просто пришлось исправить некоторые синтаксические ошибки с моей стороны. 

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