2

我试图遍历许多索引变量，在本例中为颜色，为每个变量创建一个类。类似这样的东西：

@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 和 Hex 版本。问题是 @{@var} 直到事后才评估，因此不会解析为颜色。

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

4

2 回答 2

3

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

@colours但是，通过构建两个更大的“数组”类型变量，并将@colour-names所有单独定义的颜色变量放入其中，我确实在 LESS 的最新（当前测试版）版本（1.4）中提出了一个可行的解决方案。然后我们使用新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);
}
于 2013-03-20T15:34:55.847 回答
1

经过进一步检查（稍作休息），我找到了一个适用于 less 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/

于 2013-03-24T07:59:37.770 回答