少css从一个循环调用动态变量 [英] less css calling dynamic variables from a loop
本文介绍了少css从一个循环调用动态变量的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想做什么:
我有(现在)7种颜色作为变量。
What I'm trying to do: I have (for now) 7 colors as variables. I want to be able to use them at several places and iterate throught them.
这是我无法工作的。
@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);
我需要的
我想要这个结果
What I need I want this as a result
.color1:hover{color#06A1Co}
.color2:hover{color#8F4F9F}
etc..
有什么问题?
找到一种方法来评估@ tmp @ num以获取实际变量。
What's the problem? I can't find a way to evalute @tmp@num to get the actual variable.
UPDATE
Ash Hitchcock提供的完美答案。
UPDATE Perfect answer provided by Ash Hitchcock below.
推荐答案
我刚刚试图用同样的方式用LESS做同样的事情。我想出的解决方案是使用 Parametric Mixin 创建(定义)变量,请参见更新示例:
I have just been trying todo the same thing today with LESS. The solution I came up with is to use a Parametric Mixin to create (define) the variable, see updated exmaple:
@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);
希望这有帮助。
这篇关于少css从一个循环调用动态变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文