CSS LESS - add variable in loop

Question

First, I have different color variables :

@nav-left-color-item-1 : #e7663f;
@nav-left-color-item-2 : #69a7d9;
...
@nav-left-color-item-X : #554789;

Then, I made a loop in order to create different items like this:

.generate-item(3);

.generate-item(@n, @i: 1) when (@i =< @n) {
  .item@{i} {

  }
  .generate-item(@n, (@i + 1));
}

... that giving it

.item1 {

}
.item2 {

}
.item3 {

}

What I'm trying to do is to insert my different color variables in each item with index matching... I added the variable @i instead of the index but it didn't work...

.generate-item(3);

    .generate-item(@n, @i: 1) when (@i =< @n) {
      .item@{i} {
        @nav-left-color-item-@i ;
      }
      .generate-item(@n, (@i + 1));
    }

Thanks for your helping !

Answer 1

You could move the colors into an array then fetch by index, eg:

@colors: 'color-item-1' #f00, 'color-item-2' #0f0, 'color-item-3' #00f;

.generate-item(3);

.generate-item(@n, @i: 1) when (@i =< @n) {
    .item@{i} {
        color: extract(extract(@colors, @i),2);
      }
   .generate-item(@n, (@i + 1));
}