less css calling dynamic variables from a loop -
what i'm trying do: have (for now) 7 colors variables. want able use them @ several places , iterate throught them.
this have don't work
@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 need want result
.color1:hover{color#06a1co} .color2:hover{color#8f4f9f} etc.. what's problem? can't find way evalute @tmp@num actual variable.
update perfect answer provided ash hitchcock below.
i have been trying todo same thing today less. solution came use parametric mixin create (define) 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); hope helps.
Comments
Post a Comment