menos css chamando variáveis dinâmicas de um loop
O que estou tentando fazer: Eu tenho (por agora) 7 cores como variáveis. Eu quero ser capaz de usá-los em vários lugares e repeti-los.
É isso que eu tenho que não funcionam
@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);
O que eu preciso Eu quero isso como resultado
.color1:hover{color#06A1Co}
.color2:hover{color#8F4F9F}
etc..
Qual é o problema? Não consigo encontrar uma maneira de avaliar @ tmp @ num para obter a variável real.
ATUALIZAR Resposta perfeita fornecida por Ash Hitchcock abaixo.