less css calling dynamic variables from a loop

css, dynamic, less, loops, variables

Solution

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);

Hope this helps.

Problem

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. This is what I have that 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 I need I want this as a result ``` .color1:hover{color#06A1Co} .color2:hover{color#8F4F9F} etc.. ``` What's the problem? I can't find a way to evalute @tmp@num to get the actual variable. UPDATE Perfect answer provided by Ash Hitchcock below.

Original source