Цикл по массиву пар имя-значение в LESS

Question

Есть ли способ зациклить массив пар имя / значение LESS? Что-то вроде этого:

arr = alice: black, bob: orange;

.for(arr) // something something //
   .cl-@{name} {
       background-color: @{value}
   }

Чтобы сгенерировать что-то вроде этого:

.cl-alice { background-color: black; }
.cl-bob { background-color: orange; }

Я знаю, что вы можете использовать цикл для цикла, но я не уверен, что это может быть массив объектов, а не значений в LESS.

Answer 1

Ответ, данный @seven-phase-max, работает очень хорошо. Для полноты вы также должны заметить, что вы можете сделать то же самое в Меньше без импортированных "for" сниппет.

с сайта lesscss.org

Пытаясь максимально приблизиться к декларативной природе CSS, Лесс решил реализовать условное выполнение через защищенные миксины вместо операторов if/else, в духе спецификаций функций @media.

а также

В Мессине миксин может позвонить сам. Такие рекурсивные миксины, в сочетании с Guard Expressions и Pattern Matching, могут использоваться для создания различных итеративных / петлевых структур.

Таким образом, в Less вы могли бы написать:

@array: alice black, bob orange;

.createcolorclasses(@iterator:1) when(@iterator <= length(@array)) {
    @name: extract(extract(@array, @iterator),1);
    .cl-@{name} {
        background-color: extract(extract(@array, @iterator),2);
    }
    .createcolorclasses(@iterator + 1);
}
.createcolorclasses();

или действительно:

@array: alice black, bob orange;

.createcolorclasses(@iterator:1) when(@iterator <= length(@array)) {
    @name: extract(extract(@array, @iterator),1);
    &@{name} {
        background-color: extract(extract(@array, @iterator),2);
    }
    .createcolorclasses(@iterator + 1);
}
.cl-{
    .createcolorclasses();
}

Answer 2

В Less "пара" (в ее простейшей форме) также может быть представлена ​​в виде массива, поэтому она может быть такой простой, как:

@import "for";

@array: alice black, bob orange;

.for(@array); .-each(@value) {
    @name:  extract(@value, 1);
    @color: extract(@value, 2);
    .cl-@{name} {
        background-color: @color;
    }
}

Тем не менее, обратите внимание, что ".for" ограничен единственным циклом для каждой области, поэтому лучше переписать выше что-то вроде этого:

@import "for";

@array: alice black, bob orange;

.cl- {
    .for(@array); .-each(@value) {
        @name:  extract(@value, 1);
        &@{name} {
            background-color: extract(@value, 2);
        }
    }
}

Импортированный "for" фрагмент (это просто обёртка mixin для рекурсивных циклов Less) можно найти здесь (с примерами здесь и здесь).

Answer 3

Хотя из других ответов полезно знать, что Less поддерживает рекурсивные функции и миксины, теперь есть гораздо более простой ответ на этот простой вопрос. Это решение протестировано для работы с Less v3.9, но должно быть возвращено к Less v3.7, когда каждый был представлен.

.array() {
  alice: black;
  bob: orange;
}

each(.array(), {
  .cl-@{key} {
    background-color: @value;
  }
});

Вывод аккуратный:

.cl-alice {
  background-color: black;
}

.cl-bob {
  background-color: orange;
}

Хочу больше? Ну, как говорится, "Вы можете рисковать больше". использование @index использовать индекс на основе 1 в формуле выше.

Answer 4

Вот один " параметрический миксин", который вы можете использовать с парами "ключ: значение".

Массив пар "ключ: значение" определяется следующим образом: @array: "ключ: значение", "ключ: значение";

// imported "for" snippet (it's just a wrapper mixin for recursive Less loops)
// http://is.gd/T8YTOR
@import "for";

// loop all items and generate CSS
.generate_all(@array) {
    .for(@array);
    .-each(@item) {
        @name: e(replace(@item, ':(.*)', ''));
        @value: replace(@item, '^[^:]*:', '');
        @{name} {
            z-index: e(@value);
        }
    }
}

Определение:

@array_test: ".test:9000", "header .mainNav:9000", "footer:8000", "li.myclass:5000";

Тестовое задание

.generate_all(@array);

Результат:

.test {
  z-index: 9000;
}
header .mainNav {
  z-index: 8000;
}
footer {
  z-index: 7000;
}
li.myclass {
  z-index: 5000;
}

У меня работает с помощью grunt + less@1.7.4