Loops para todos los gustos

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][1] que existen actualmente son basados en lenguajes de programación ([JavaScript][2], 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][1] más usados actualmente: [HTML] Jade, Slim, Liquid, Haml, [CSS] Less, Sass y Stylus

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

Jade⌗

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

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:⌗

• Jade: Node template engine
• Slim: Fast, lightweight template engine
• Liquid templating language
• Haml
• Less: CSS pre-processor
• Sass: Syntatically awesome stylesheets
• Stylus: expressive, robust, feature-rich CSS preprocessor

[1]: http://www.csslab.cl/etiqueta/pre-procesadores/ “Enlace en CSSLab.cl a “Tag: Pre-Procesadores”” [2]: http://www.csslab.cl/categoria/javascript/ “Enlace en CSSLab.cl a “Categoría: JavaScript””