Less css calls dynamic variables from a loop

Question

What I'm trying to do: I have (at the moment) 7 colors as variables. I want to be able to use them in several places and iterate over them.

This is what I have that do not 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 do I need? I want this as a result

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

What is the problem? I cannot find a way to evalute @tmp @num to get the actual variable.

UPDATE The ideal answer suggested by Ash Hitchcock below.

Answer 1

I just tried to do the same today with LESS. The solution I came up with is to use a Parametric Mixin to create (define) a 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 this helps.

Answer 2

Why don't you use them in your CSS file? Why are you trying to use them in your file? this is not a great idea.
Using CSS for every div will be good. Give it a class with Like code:

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

And just use one CSS for all conditions. That would be easy.