Loops para todos los gustos

30/sep/2014 3

En desarrollo front-end se da a menudo que tengamos etiquetas y selectores que se repitan varias veces, con la misma o diferentes clases ó valores que vayan en incremento/decremento. Pero como HTML y CSS no son lenguajes de programación (no tienen lógica asociada) esto no lo podemos automatizar.

Un loop es un bloque de código que se ejecuta tanto cuanto una condición sea verdadera (true).

Afortunadamente, los pre-processors que existen actualmente son basados en lenguajes de programación (JavaScript, Ruby, etc.) a los que podemos aplicar este y muchos otros tipos de lógica y que luego interpretan el código y lo compilan como HTML/CSS puro. En esta ocasión abordaré loops en los pre-processors más usados actualmente: [HTML] Jade, Slim, Liquid, Haml, [CSS] Less, Sass y Stylus

En los siguientes ejemplos, para cada pre-processor se iterará sobre sus elementos 10 veces:

Jade

- for (var x = 0; x < 10; x++)
  element(attr="value")

Slim

- for i in (1..10)
  element #{i}

Liquid

{% for x in (1..10) %}
  Element {{ i }}
{% endfor %}

Haml

- (1..10).each do |i|
  %element

Less

.loop(@index) when (@index > 0){
  selector:nth-child(@{index}) { 
    property: @index * 1px; 
  }
  .loop(@index - 1);
}
.loop(0){}
.loop(10);

Sass

@for $i from 1 through 10
  .#{element}-#{$i}
    property: $i * 1px

Stylus

for $i in (1..10)
    property $i * 1px

Links:

Comentarios

  1. Gino [#]

    Muy buena y clara explicación de los diferentes pre-processor que están actualmente.

  2. Trucos de diseño - Artysmedia [#]

    […] Loops para todos los gustos […]

  3. Trucos de diseño web - Artysmedia [#]

    […] Loops para todos los gustos […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab