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

less modifyvars

Question

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.

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

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?

Answer 1

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 */
}

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

Answer 2

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) here (con ejemplos here y here ).

Answer 3

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