Я пытаюсь создать несколько классов в цикле на основе ряда предопределенных фрагментов переменных.
У меня есть документ variable.less, который я импортирую вверху этого меньшего файла, содержащего мои цветовые переменные. Затем я хочу создать соответствующие классы для них, но я не могу получить меньше, чтобы скомпилировать переменную.
Мой код:
.loop-class(~"primary", ~"success", ~"info", ~"warning", ~"danger";);
.loop-class(@list, @index: 1) when (isstring(extract(@list, @index))) {
@status: extract(@list, @index);
.button-@{status} {
color: ~'@button-@{status}';
}
.loop-class(@list, (@index + 1));
}
Который компилируется в:
.button-primary {
color: @button-primary;
}
.button-success {
color: @button-success;
}
etc etc
Как вы можете видеть, я получаю имя переменной для правильной конкатенации, но я не могу заставить его разрешить, поэтому я предполагаю, что LESS уже выполнил компиляцию своей переменной, прежде чем добраться до этой функции?
Я уже пытался переместить переменные в этот документ, а также обернуть переменные в миксин и добавить его в класс .loop, но ни один из этих способов не помог.
Я также пробовал что-то вроде:
@status: extract(@list, @index);
@compileClass: ~'@button-@{status}';
.button-@{status} {
color: @compileClass;
}
где я сохраняю переменную в другой, а затем ссылаюсь на нее, но это дает тот же результат.
Я посмотрел на less css, вызывающий динамические переменные из цикла и попытался реализовать это следующим образом:
.loop-class(~"primary", ~"success", ~"info", ~"warning", ~"danger";);
.define(@var) {
@fallback: ~'@button-@{var}';
}
.loop-class(@list, @index: 1) when (isstring(extract(@list, @index))) {
@status: extract(@list, @index);
.button-@{status} {
.define(@status);
color: @@fallback;
}
.loop-class(@list, (@index + 1));
}
Но это дало мне ошибку, что @@button-danger (последний в индексе) не определен, поэтому он все еще не может разрешить переменную.
Вам, ребята, очевидно, что я делаю неправильно?
Спасибо за вашу помощь!