LESS -如何解析/转义参数变量(例如:变量(变量)在mixin/循环中

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提供一个回退变量，我想在mixin中以编程方式更新每种颜色/值，以提供一个RGBA &十六进制的版本。问题是@{@var}直到事实之后才计算，因此不会解析为颜色。

是否有一种方法来转义变量，使它们不通过引用传递?JSFiddle显示输出:http://jsfiddle.net/Qj2cZ/

Answer 1

对变量的多次引用肯定会导致颜色函数出现问题。这可能是一个bug。我还没有为LESS 1.3.3或更低版本提出解决方案。

然而，我确实在LESS的最新(目前测试版)版本(1.4)中提出了一个工作解决方案，通过构建两个较大的"数组"类型变量，@colours和@colour-names，将所有单独定义的颜色变量放入其中。然后我们使用新的extract()函数来访问那些在循环中，你可以得到你想要的。现在你必须决定1.4是否适合你。

LESS 1.4 Working

更少的代码

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

Answer 2

经过进一步的检查(并经过一点喘息)，我找到了一个适用于less v1.3.3的工作解决方案。如果您使用的是v1.4，我仍然推荐ScottS的答案，因为它绕过了一个bug。

如前所述，问题在于变量没有及时为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 here: http://jsfiddle.net/LJ3zX/