Cómo generar CSS con bucle en menos

Después de indagar en diferentes repositorios y sitios webs al concluir hemos dado con la resolución que te mostramos pronto.

Solución:

Prueba esto:

@iterations: 5;
.span-loop (@i) when (@i > 0) 
    [email protected]i 
        width: ~"@i%";
    
    .span-loop(@i - 1);

.span-loop (@iterations);

Producción:

.span-5 
  width: 5%;

.span-4 
  width: 4%;

.span-3 
  width: 3%;

.span-2 
  width: 2%;

.span-1 
  width: 1%;

Puedes probarlo en less2css.

Editar 3 de abril de 2014

Aquí hay una versión más flexible con más opciones:

.custom-loop( @base-value:@n ; @n ; @unit : px; @j : 1 ;@_s:0 ; @step-size:1  ; @selector:~".span-"; @property : width)
when not(@n=0)  

  @size : @[email protected]_s;
  @selector@j
    @property : ~"@size@unit";
  
  .custom-loop(@base-value ,  (@n - 1), @unit , (@j + 1) ,  (@[email protected]) , @step-size,  @selector, @property);

Puedes llamar a esto solo @n cual es el argumento requerido:

.custom-loop(@n:3);

Que dará salida:

.span-1 
  width: 3px;

.span-2 
  width: 4px;

.span-3 
  width: 5px;

Pero si desea tener control sobre cada parámetro, aquí hay un ejemplo usando todos los parámetros personalizados:

.custom-loop( @n: 3 , @base-value:1, @unit: '%', @property:font-size, @selector: ~".fs-", @step-size: 2);

Esto generará:

.fs-1 
  font-size: 1%;

.fs-2 
  font-size: 3%;

.fs-3 
  font-size: 5%;

Descripciones de parámetros

1. @norte : enteroEl número de iteraciones.

2. @valor base (Opcional): entero, El valor inicial del bucle que se asignará a la propiedad. El valor predeterminado es el mismo que el valor asignado para el número de iteraciones @n.

3. @unidad (Opcional): string, La unidad de la propiedad. El valor predeterminado es px.

4. @propiedad (Opcional): no-string o string La propiedad CSS. El valor predeterminado es width

5. @selector (Opcional): escapado string, El selector utilizado para el bucle. Podría ser cualquier cosa, siempre y cuando se transmita como un escape string.

6. @Numero de pie (Opcional): enteroEl valor por el que se incrementa el bucle.

NOTAS

Nota 1: El selector personalizado se pasa como escape string. Si no se escapa, no funcionará como se esperaba.

Nota 2: El mixin se llama utilizando explícitamente el nombre del parámetro. Esto tiene algunas ventajas y desventajas:

Nota 3: La unidad se pasa como un string.

Ventajas

1. Está claro qué parámetro se llama.
2. No tiene que confiar en el orden de los parámetros y recordar qué parámetro viene primero, segundo,…

Desventajas

1. ¿Supongo que se ve un poco feo?
2. (agregue a la lista y/o cambie la implementación si conoce una mejor)

Todo, encontré una manera de generar css en bucle. Por favor revíselo. Gracias.

@iterations: 100;

// helper class, will never show up in resulting css
// will be called as long the index is above 0
.loopingClass (@index) when (@index > 0) 

    // create the actual css selector, example will result in
    // .myclass_30, .myclass_28, .... , .myclass_1
    (~"[email protected]index") 
        // your resulting css
        width: percentage((@index - 1) *0.01);
    

    // next iteration
    .loopingClass(@index - 1);


// end the loop when index is 0
.loopingClass (0) 

// "call" the loopingClass the first time with highest value
.loopingClass (@iterations);

Tenga en cuenta que desde la versión 3.7 Less tiene una función each(), que se puede usar fácilmente con el range() función para producir el código deseado – así:

each(range(100),
    [email protected]value  width: @value * 1%; 
);

Comentarios y valoraciones del tutorial

Si entiendes que te ha sido provechoso este artículo, te agradeceríamos que lo compartas con más seniors y nos ayudes a extender nuestro contenido.

---

---

Utiliza Nuestro Buscador