Loop through array of variable names in Less

Question

In our app, we have a preset list of colors that a user can be choose from and everything related to that user will have that color.

Throughout the app, we will have various modules with the color attached as a class name.

eg.

<div class="example_module green">
  ...
</div>

We are using LESS for our CSS.

In a number of places we are doing things like this:

.example_module.green { background: @green; }
.example_module.red { background: @red; }
.example_module.blue { background: @blue; }
etc

I'd like to be able to set all these color names as an array and iterate over them. If we add colors in the future, we only have to add it in one place.

Pseudo code:

@colors: ['green', 'red', 'blue'];

for each @color in @colors {
  .example_module.@color { background: @color; }
} 

Is something like this even supported in LESS?

Answer 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).

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

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

Answer 4

1. Define mixin:

.foreach(@list, @body, @i: length(@list)) when (@i>0) 
{
    .foreach(@list, @body, @i - 1);

    @n: length(@list);
    @value: extract(@list, @i);
    @body();
    /* you can use @value, @i, @n in the body */
}

2. Usage:

.example-module {
  .foreach (red green blue,
  {
    &.@{value} {
      color: @value;
    }
  });
}

Another example:

.nth-child (@list, @style) {
    .foreach(@list, 
    {
      @formula: e(%("%dn+%d", @n, @i));
      &:nth-child(@{formula}) {
        @style();
      }
    });
}

tr {
  .nth-child (#bbb #ccc #ddd #eee,
  {
      background: @value;
  });
}