Loop a través de la matriz de nombres de variables en Less

En nuestra aplicación, tenemos una lista preestablecida de colores de la que un usuario puede elegir y todo lo relacionado con ese usuario tendrá ese color.

A lo largo de la aplicación, tendremos varios módulos con el color adjunto como nombre de clase.

p.ej.

...

Estamos usando LESS para nuestro CSS.

En varios lugares, estamos haciendo cosas como esta:

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

Me gustaría poder configurar todos estos nombres de colores como una matriz e iterar sobre ellos. Si agregamos colores en el futuro, solo debemos agregarlo en un solo lugar.

Pseudo código:

 @colors: ['green', 'red', 'blue']; for each @color in @colors { .example_module.@color { background: @color; } } 

¿Algo como esto incluso se admite en LESS?

Ver Loops . Por ejemplo (asumiendo que las @green , @red , @blue están definidas en otra parte):

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

– – –

En Modern Less, lo mismo puede ser más directo con la ayuda del plugin Lists :

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

– – –

Y en Legacy Less, el azúcar sintáctico se puede lograr usando:

 @import "for"; @colors: green, red, blue; .example_module { .for(@colors); .-each(@name) { &.@{name} {background: @@name} } } 

Donde se puede encontrar el fragmento de "for" importado (es solo un mixin wrapper para los Loops recursivos Less) aquí (con ejemplos aquí y aquí ).

Esta mixin funciona bien para mí. El segundo parámetro es un bloque de código que tiene acceso al elemento de iteración actual (@value) y al índice (@i).

  1. Definir mixin:

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

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

     .color-1 { color: #1abc9c; } .color-2 { color: #2ecc71; } .color-3 { color: #3498db; } .color-4 { color: #9b59b6; } 
  1. Definir 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. Uso:
 .example-module { .foreach (red green blue, { &.@{value} { color: @value; } }); } 

Otro ejemplo:

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