Loop through array of variable names in Less

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?

Answers


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


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

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

  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 */
}
  1. 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;
  });
}

Need Your Help

Android service- how to communicate with activities

android service android-activity

I'm wondering which is the best way to communicate between a Service and an activity..

How can I access to external memory as heap

memory-management embedded microcontroller keil

I am working on embedded project with Keil MDK-ARM compiler. I try to access to external memory as heap but when I download my program in my micro (micro is a lpc1788) after the download is done it