Search code examples
lessmixinsless-mixins

Change variable name in a loop


I need the variable name to change to trees, balloons etc in a loop in order to obtain

.trees{ color:1;}
.balloons { color:2;}

but I obtain instead:

.trees{color:2}  
.name{color:1}

Tried this mixin but is not working, what I'm doing wrong?

@name:name;
.name(@index) when (@index = 2) {@name: balloons;}
.name(@index) when (@index = 1) {@name: trees;}
.name(@index) when (@index > 0) {
.@{name}{ color:@index; }
  .name(@index - 1)
}
.name(2);

Solution

  • Look this codepen, you have to use list of desired names and you can get any element of the list by it index:

    @item: extract(@names, @index);