LESS-如何在混合/循环中解析/转义参数变量（即变量变量）

Question

I'm attempting to loop through a number of indexed variables, in this case colours, to create a class for each. Something along the lines of this:

@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);

Rather than providing a fallback variable for IE<9, I'd like to update each colour/value programatically within the mixin to provide both an RGBA & Hex version. Problem is the @{@var} doesn't evaluate until after the fact and so won't parse as a colour.

Is there a way to escape the variables so they don't pass by reference? JSFiddle here showing the output: http://jsfiddle.net/Qj2cZ/

Answer 1

The multiple reference to the variable is definitely causing issues with the color functions. This may be a bug. I have not come up with a solution for LESS 1.3.3 or lower.

However, I did come up with a working solution in the latest (currently beta) version (1.4) of LESS by building two larger "array" type variables, @colours and @colour-names to put all the individually defined color variables into. Then we use the new extract() function to access those in the loop, and you can get what you desire. Whether 1.4 is an option for you or not at this time you will have to determine.

LESS 1.4 Working

LESS Code

@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 Output

*[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);
}

Answer 2

On further examination (and following a bit of a breather) I found a working solution for less v1.3.3. If you are using v1.4 I would still recommend ScottS's answer, as this hacks around a bug.

As mentioned, the issue is with the variable not being parsed in time for the color() function. However if the variable is evaluated in one function and passed to another for conversion to a colour everything works fine. So the following outputs the required styles:

@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 here: http://jsfiddle.net/LJ3zX/