Как я могу сделать этот цикл LESSCSS работать правильно?

Question

В моем проекте я использую 4 цветовые темы, и с помощью этой функции я хочу автоматически назначать значения определенных цветов, содержащихся в переменной, и я также хочу использовать имя переменной, чтобы назначить ее классу.

// the variables
@peach: 3399cc;
@green: ff00CC;
@orange: FF0033;
@yellow: EE0033;

@list: @peach, @green, @orange, @yellow;

// моя МЕНЬШАЯ функция

Он генерирует имя класса со значением переменной: ex: bsq3399cc Я хотел бы, чтобы имя класса совпадало с именем переменной: ex bsq-peach

Я использую функцию.for, как описано здесь. https://github.com/seven-phases-max/less.curious/blob/master/articles/for-each.md

.bsq {
    .for(@list); .-each(@name) {
        &@{name} {
            @color: color("#@{name}");
            li& { background: @color; }
            li& strong { background:lighten(@color, 10%); }
            li& i { background:lighten(@color, 20%); }
        }
    }
}

.for mixin //

// ............................................................
// .for

.for(@i, @n) {.-each(@i)}
.for(@n)     when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n)  {
    .for((@i + (@n - @i) / abs(@n - @i)), @n);
}

// ............................................................
// .for-each

.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i) when (@i > 0)    {.-each(extract(@array, @i))}

HTML-код, который я использую, здесь.

<ul class="testing">
    <li class="bsq3399cc"><strong>1</strong><i>10</i></li>
    <li class="bsqff00CC"><strong>2</strong><i>20</i></li>
    <li class="bsqFF0033"><strong>3</strong><i>30</i></li>
    <li class="bsqEE0033"><strong>4</strong><i>40</i></li>
</ul>

Answer 1

Что ж, ваша ошибка во фрагменте состоит в том, что вы фактически не предоставляете эти "имена" для классов (т.е. peach, green, orange, yellow) но только шестнадцатеричные значения цвета. Обратите внимание, что в:

// the variables
@peach:  3399cc;
@green:  ff00CC;
@orange: FF0033;
@yellow: EE0033;

@list: @peach, @green, @orange, @yellow;

@list равно 3399cc, ff00CC, FF0033, EE0033,

Я думаю, что вы действительно имели в виду что-то вроде этого:

@peach:  #3399cc;
@green:  #ff00CC;
@orange: #FF0033;
@yellow: #EE0033;

@list: 'peach', 'green', 'orange', 'yellow';

li.bsq- {
    .for(@list); .-each(@name) {
        @name_: e(@name);
        @color: @@name;
        &@{name_} {
            background: @color;
            strong {background: lighten(@color, 10%)}
            i      {background: lighten(@color, 20%)}
        }
    }
}

---

Кроме того, я бы также избавился от @green/'green' дублирование, если вам действительно не нужны эти отдельные переменные в другом месте: см., например, цикл по массиву пар имя-значение в LESS и последний пример в /questions/22883041/dinamicheskie-peremennyie-lesscss-na-osnove-klassa-predka/22883046#22883046 (только противоположные методы для того же подхода).