меньше CSS вызывает динамические переменные из цикла

Что я пытаюсь сделать: У меня есть (на данный момент) 7 цветов в качестве переменных. Я хочу иметь возможность использовать их в нескольких местах и повторять их.

Это то что у меня не работает

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

Что мне нужно Я хочу это в результате

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

В чем проблема? Я не могу найти способ оценить @ tmp @ num, чтобы получить фактическую переменную.

ОБНОВИТЬ Идеальный ответ предоставил Эш Хичкок ниже.

Ответы на вопрос(2)

Ваш ответ на вопрос