Разрешение динамических переменных в LESS

Я пытаюсь создать несколько классов в цикле на основе ряда предопределенных фрагментов переменных.

У меня есть документ 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 (последний в индексе) не определен, поэтому он все еще не может разрешить переменную.

Вам, ребята, очевидно, что я делаю неправильно?

Спасибо за вашу помощь!


variables less dotless
person Micke Alm    schedule 30.01.2014    source источник
comment
Добро пожаловать в Stack Overflow, и спасибо за правильно сформулированный вопрос для вашего первого поста.   -  person ScottS    schedule 30.01.2014
comment
Большое спасибо, Скотт, и спасибо за решение моего первого вопроса! ;)   -  person Micke Alm    schedule 30.01.2014

Ответы (1)


arrow_upward
4
arrow_downward

Отсутствующие скобки

Вам не хватает набора необходимых скобок для разрешения переменной:

МЕНЬШЕ

//imported from another file
@button-primary: cyan;
@button-success: green;
@button-info: orange;
@button-warning: yellow;
@button-danger: red;

//in your mixin file
.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}}'; /* two more brackets needed */
              |                |
            here             here
    }
    .loop-class(@list, (@index + 1));
}

Вывод CSS

.button-primary {
  color: #00ffff;
}
.button-success {
  color: #008000;
}
.button-info {
  color: #ffa500;
}
.button-warning {
  color: #ffff00;
}
.button-danger {
  color: #ff0000;
}

Более чистый и удобный код

Кроме того, в целях менее загроможденного и более удобного для пользователя кода вы можете удалить множественные интерполяции строк, необходимые для вызова микширования, изменив isstring на iskeyword в миксине:

.loop-class(primary, success, info, warning, danger;); /* cleaner code on call */
.loop-class(@list, @index: 1) when (iskeyword(extract(@list, @index))) {
    @status: extract(@list, @index);

    .button-@{status} {
    color: ~'@{button-@{status}}';
    }
    .loop-class(@list, (@index + 1));
}
person ScottS    schedule 30.01.2014
comment
Отлично, решение сработало отлично! Отличный призыв к использованию iskeyword вместо этого, безусловно, делает его более легким для чтения и понимания. Большое спасибо, Скотт! - person Micke Alm; 30.01.2014