css - 更少的 css 从循环中调用动态变量

Question

我正在尝试做的事情： 我（现在）有 7 种颜色作为变量。我希望能够在多个地方使用它们并遍历它们。

这就是我所拥有的不起作用

@color1:#06A1C0;
@color2:#8F4F9F;
@color3:#ED1D24;
@color4:#5A9283;
@color5:#B38C51;
@color6:#EC008C;
@color7:#8F4F9F;

@iterations: 8;
.mixin-loop (@index) when (@index > 0) {
color@{index}:hover{
  @tmp: ~'@color';
  @num: @index;
      color: @tmp@num;
  }

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

我需要什么 我想要这个结果

.color1:hover{color#06A1Co}
.color2:hover{color#8F4F9F}
etc..

有什么问题？ 我找不到评估 @tmp@num 以获取实际变量的方法。

更新 以下 Ash Hitchcock 提供的完美答案。

Answer 1

我今天一直在尝试用 LESS 做同样的事情。我想出的解决方案是使用参数 Mixin来创建（定义）变量，请参阅更新的示例：

@color1:#06A1C0;
@color2:#8F4F9F;
@color3:#ED1D24;
@color4:#5A9283;
@color5:#B38C51;
@color6:#EC008C;
@color7:#8F4F9F;

@iterations: 7;

.define(@var) {
  @colorSet: 'color@{var}';
}


.mixin-loop (@index) when (@index > 0) {
color@{index}:hover{
    .define(@index);
    color:  @@colorSet;
  }

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

希望这可以帮助。

Answer 2

为什么不在 CSS 文件中使用它们？你为什么在你的文件中尝试它们？这不是一个好主意。
为每个 DIV 使用 CSS 会很好。用代码给它一个类，如：

<div class='@if(condition == true) {"thisclass"} else {"thatclass"}'></div>

并且只需在所有条件下使用一个 CSS。那很简单。