Loop through array of variable names in Less

Solution 1:

See Loops. For example (assuming @green, @red, @blue variables are defined elsewhere):

@colors: green, red, blue;

.example_module {
    .-(@i: length(@colors)) when (@i > 0) {
        @name: extract(@colors, @i);
        &.@{name} {background: @@name}
        .-((@i - 1));
    } .-;
}

- - -

In Modern Less the same can be more straight-forward with the help of the Lists plugin:

@colors: green, red, blue;

.for-each(@name in @colors) {
    .example_module.@{name} {
        background: @@name;
    }
}

- - -

And in Legacy Less the syntactic sugar can be achieved using:

@import "for";

@colors: green, red, blue;

.example_module {
    .for(@colors); .-each(@name) {
        &.@{name} {background: @@name}
    }
}

Where the imported "for" snippet (it's just a wrapper mixin for recursive Less loops) can be found here (with examples here and here).

Solution 2:

This mixin works fine for me. The second param is a code block that have access to the current iteration elem (@value) and index (@i).

  1. Define mixin:

    .for(@list, @code) {
        & {
            .loop(@i:1) when (@i =< length(@list)) {
                @value: extract(@list, @i);
    
                @code();
    
                .loop(@i + 1);
            }
    
            .loop();
        }
    }
    
  2. Use:

    @colors: #1abc9c, #2ecc71, #3498db, #9b59b6;
    
    .for(@colors, {
        .color-@{i} {
            color: @value;
        }
    });
    
  3. Result css:

    .color-1 {
      color: #1abc9c;
    }
    .color-2 {
      color: #2ecc71;
    }
    .color-3 {
      color: #3498db;
    }
    .color-4 {
      color: #9b59b6;
    }
    

Solution 3:

With modern LESS (>= 3.7), you can use the built-in each function:

/* (assuming @clr-green, @clr-red, @clr-blue variables are defined elsewhere) */
@colors: {
  green: @clr-green;
  red: @clr-red;
  blue: @clr-blue;
}

each(@colors, {
  .example_module.@{key} {
    background: @value;
  }
});