Как в цикле Less вызвать переменную с суффиксом шага цикла?

Хочу в цикле вызывать переменную с суффиком, равным шагу цикла (итерации)
@color-1: rgb(208, 101, 3);
@color-2: rgb(233, 147, 26);
@color-3: rgb(22, 145, 190);
@color-4: rgb(22, 107, 162);
@color-5: rgb(27, 54, 71);
@color-6: rgb(21, 40, 54);

.loop (@i) when (@i <= 6) {
        .menu-item_@{i} {
            color: @color-(@i); // Неверно ... не могу понять, как написать 
        }
        .loop(@i + 1);
    }
    .loop (0) {}
    .loop (1);

Мне нужен такой итог:
// Код на LESS 
.menu-item_1 {color: @color-1;}
.menu-item_2 {color: @color-2;}
.menu-item_3 {color: @color-3;}
.menu-item_4 {color: @color-4;}
.menu-item_5 {color: @color-5;}
.menu-item_6 {color: @color-6;}


Решение есть, но немного не то, что я хочу:
.bgcolor (@num) when (@num = 1) {background: @color-1}
.bgcolor (@num) when (@num = 2) {background: @color-2}
.bgcolor (@num) when (@num = 3) {background: @color-3}
.bgcolor (@num) when (@num = 4) {background: @color-4}
.bgcolor (@num) when (@num = 5) {background: @color-5}
.bgcolor (@num) when (@num = 6) {background: @color-6}

.loop (@i) when (@i <= 6) {
    .menu-item_@{i} {
        .bgcolor(@i);
    }
    .loop(@i + 1);
}
.loop (0) {}
.loop (1);
  • Вопрос задан
  • 2251 просмотр
Пригласить эксперта
Ответы на вопрос 1
monochromer
@monochromer
DIVeloper
Мне кажется, лучше уж цвета загнать в массив

@colors: rgb(208, 101, 3), rgb(22, 107, 162), rgb(21, 40, 54);
@length: length(@colors);

.loop(@i) when (@i <= @length) {
  .menu-item_@{i} {
    color: extract(@colors, @i); 
  }
  .loop(@i + 1);
}

.loop(1);
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы