LESS - как анализировать / экранировать параметрические переменные (т. Е. Переменные переменные) в микшировании / цикле

Question

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

@colour-1: #FF0000;
@colour-name-1: "red";

.loop (@index) when (@index > 0) {
  @colour: ~"@{colour-@{index}}";
  @name: "@{colour-name-@{index}}";

  (~'*[data-colour="@{name}"]') {
    background-color: @colour;
    background-color: hsla(hue(@colour), saturation(@colour), lightness(@colour), 0.5);
  }

  .loop(@index - 1);
}
.loop (0) {}
.loop (1);

Вместо того, чтобы предоставлять запасную переменную для IE<9, я хотел бы программно обновлять каждый цвет / значение в миксине, чтобы обеспечить как версию RGBA, так и Hex. Проблема в том, что @{@var} не оценивается до истечения факта и поэтому не будет анализироваться как цвет.

Есть ли способ избежать переменных, чтобы они не передавались по ссылке? JSFiddle здесь показывает вывод: http://jsfiddle.net/Qj2cZ/

Answer 1

При дальнейшем осмотре (и после небольшой передышки) я нашел рабочее решение за меньшую версию 1.3.3. Если вы используете v1.4, я бы все же порекомендовал ответ Скотта, так как это решает проблему.

Как уже упоминалось, проблема в том, что переменная не была проанализирована во времени для функции color(). Однако, если переменная вычисляется в одной функции и передается другой для преобразования в цвет, все работает нормально. Таким образом, следующий выводит требуемые стили:

@colour-1: #FF0000;
@colour-name-1: "red";

.loop (@index) when (@index > 0) {
  @colour: ~"@{colour-@{index}}";
  @name: "@{colour-name-@{index}}";
  .setColour(@colour, @name);
  .loop(@index - 1);
}

.setColour (@colour-string, @name) {
  @colour: color(@colour-string);
  (~'*[data-colour="@{name}"]') {
    background-color: @colour;
    background-color: hsla(hue(@colour), saturation(@colour), lightness(@colour), 0.5);
  }
}

.loop (0) {}
.loop (1);

JSFiddle здесь: http://jsfiddle.net/LJ3zX/

Answer 2

Многократная ссылка на переменную определенно вызывает проблемы с функциями цвета. Это может быть ошибкой. Я не придумал решение для LESS 1.3.3 или ниже.

Тем не менее, я нашел рабочее решение в последней (в настоящее время бета) версии (1.4) LESS, создав две большие переменные типа "массив", @colours а также @colour-names положить все индивидуально определенные переменные цвета в. Тогда мы используем новый extract() Функция для доступа к тем, кто в цикле, и вы можете получить то, что вы хотите. Будет ли 1.4 вариант для вас или нет в данный момент, вам придется определить.

МЕНЬШЕ 1.4 Работа

МЕНЬШИЙ Код

@num-colours: 3;

@colour-1: #FF0000;
@colour-name-1: "red";
@colour-2: #00FF00;
@colour-name-2: "green";
@colour-3: #0000FF;
@colour-name-3: "blue";

@colours: @colour-1 @colour-2 @colour-3;
@colour-names: @colour-name-1 @colour-name-2 @colour-name-3;

.define-colours-loop (@index) when (@index =< @num-colours) {
  @colour: extract(@colours, @index);
  @name: extract(@colour-names, @index);

  *[data-colour="@{name}"] {
    background-color: @colour;
    background-color: hsla(hue(@colour), saturation(@colour), lightness(@colour), 0.5);
  }

  .define-colours-loop((@index + 1));
}
.define-colours-loop (0) {}
.define-colours-loop (1);

CSS-вывод

*[data-colour="red"] {
  background-color: #ff0000;
  background-color: rgba(255, 0, 0, 0.5);
}
*[data-colour="green"] {
  background-color: #00ff00;
  background-color: rgba(0, 255, 0, 0.5);
}
*[data-colour="blue"] {
  background-color: #0000ff;
  background-color: rgba(0, 0, 255, 0.5);
}