Question

我试图遍历许多索引变量，在本例中为colors，为每个变量创建一个类。有点像这样：

@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＆lt; 9提供回退变量，而是想在mixin中以编程方式更新每个颜色/值，以提供RGBA和＆lt;十六进制版。问题是@ {@ var}直到事后才评估，因此不会解析为颜色。

有没有办法逃避变量，以便它们不通过引用传递？ JSFiddle在这里显示输出：http://jsfiddle.net/Qj2cZ/

Answer 1

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

但是，我确实通过构建两个较大的“数组”类型变量@colours和@colour-names在LESS的最新（当前测试版）版本（1.4）中提出了一个可行的解决方案单独定义的颜色变量。然后我们使用新的extract()函数来访问循环中的那些函数，你就可以得到你想要的东西。此时您是否可以选择1.4，您必须确定。

少工作1.4

LESS代码

@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

在进一步检查（并稍微喘息）后，我找到了一个较少的v1.3.3的工作解决方案。如果您使用的是v1.4，我仍然会推荐ScottS的答案，因为这会破解一个错误。

如上所述，问题在于未对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/

LESS - 如何在mixin / loop中解析/转义参数变量（即变量变量）

2 个答案:

少工作1.4