小编Dio*_*yne的帖子

较少的CSS从循环中调用动态变量

我正在尝试做什么: 我(现在)有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);
Run Code Online (Sandbox Code Playgroud)

我需要的是 我想要的结果

.color1:hover{color#06A1Co}
.color2:hover{color#8F4F9F}
etc..
Run Code Online (Sandbox Code Playgroud)

有什么问题? 我找不到一种评估@ tmp @ num来获取实际变量的方法.

更新 Ash Hitchcock提供的完美答案如下.

css variables loops dynamic less

4
推荐指数
1
解决办法
4441
查看次数

标签 统计

css ×1

dynamic ×1

less ×1

loops ×1

variables ×1