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 !

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 — Harry
– Harry, Commented Jan 9, 2015 at 8:49

SW4 · Accepted Answer · 2015-01-09 08:55:17Z

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

answered Jan 9, 2015 at 8:55

SW4

71.5k20 gold badges137 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zagloo Over a year ago

perfect :) . I found an other solution here : stackoverflow.com/questions/18272285/… but yours is better ! ! !

SW4 Over a year ago

@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

Collectives™ on Stack Overflow

CSS LESS - add variable in loop

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related