How to loop through set of variables in less?

Question

I need to put @color-1, @color-2, @color-3,.. on the place of @color-@{i} in loop. What should I put instead?

@color-0: rgb(200, 20, 20);
@color-1: ...;
@color-2: ...;
// ...

.generate-headers(5);

.generate-headers( @n, @i: 0 ) when ( @i =< @n ) {
  .widget-header-@{i} {
    width: (@i * 100% / @n);
    background-color: @color-@{i};
    color: overlay( @color-@{i}, @white );
  }
  .generate-headers(@n, (@i + 1));
}

I see @color-1 many times. Better explain pseudo code and what is the expected result. — , Sep 02 '14 at 02:59
Is having separate variables for the colors a must? It would be better to use a array/list (like in [this sample](http://stackoverflow.com/questions/25603517/less-declare-variables-using-class-names/25604556#25604556)). If you want to stick to the current approach then you would require something like `@temp: ~"color-@{i}"; background-color: @@temp;`. — Harry, Sep 02 '14 at 04:33
If you really want to reference variables by name (as opposite to more clean "array/list" pattern) you need to use ["Fnord Syntax"](http://lesscss.org/features/#variables-feature-variable-names). I.e. instead of `background-color: @color-@{i};` use `@color: "color-@{i}; background-color: @@color;`. — seven-phases-max, Sep 02 '14 at 07:14
@NikTerentyev: `~` is used to output a string without the quotes (just like [`e("a")`](http://lesscss.org/functions/#string-functions-e) would do). But for this case that is also not needed as pointed in seven-phases-max's comment. — Harry, Sep 02 '14 at 07:22
@Nik Terentyev, NP, I guess I commented a few seconds later than you've answered it :) (besides there's a minor typo in my comment). — seven-phases-max, Sep 02 '14 at 07:46

score 1 · Accepted Answer · answered Sep 02 '14 at 07:14

1

found one way:

    @color: "color-@{i}";
    background-color: @@color;

answered Sep 02 '14 at 07:14

Nik Terentyev

2,270
3
16
23

How to loop through set of variables in less?

1 Answers1