1

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 !

Zagloo
  • 1,297
  • 4
  • 17
  • 34
  • 1
    What is the property that you are trying to set? At present you are just having the variable without any property and that would result in an error. Moreover, you can use an arraylist instead of maintaining individual variables like in [**this answer**](https://stackoverflow.com/questions/25851963/how-to-create-a-proper-class-structure/25863260#25863260) – Harry Jan 09 '15 at 08:49

1 Answers1

1

You could move the colors into an array then fetch by index, e.g:

@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));
}
SW4
  • 69,876
  • 20
  • 132
  • 137
  • perfect :) . I found an other solution here : http://stackoverflow.com/questions/18272285/less-css-calling-dynamic-variables-from-a-loop but yours is better ! ! ! – Zagloo Jan 09 '15 at 09:11
  • 1
    @Zagloo - LESS doesnt support key value pairs, so here you are splitting the array, then the item into key-value pairs...of which you want the second. If you simply had an array of values, you wouldnt need this and the second nested `extract` – SW4 Jan 09 '15 at 10:41