Bucle For con SASS o SCSS

Hasta la llegada de los preprocesadores, los bucles, condicionales o las variables eran conceptos que no tenían nada que ver con las hojas de estilo, pero eso ha cambiado. No es que sea nada puntero, de hecho a estas alturas me parece inconcebible que no se considere algo así como un estándar de facto cuando para cualquier proyecto, pequeños incluidos, acelera el desarrollo y hace que sea más mantenible, es decir, vital.

Si no me equivoco esta es la primera vez que escribo sobre esto pero es posible que lo haga más. Si se utiliza un preprocesador de CSS como SASS se pueden hacer cosas interesantes.

En este caso lo que voy a explicar es como se hace un bucle for, sólo con un ejemplo se entiende muy bien. Y ya de paso un ejemplo de función.

@function isMultiple10($i){   // Función que comprueba si un numero es multiple de 10
    @return ($i % 10 == 0);   // Si el resto es 0, lo es.
}
@for $i from 10 through 100{  // Bucle que va de 10 a 100
    @if(isMultiple10($i)){    // y por cada numero comprobará si es multiple de 10
        .spacer-#{$i}{        // en caso afirmativo creara la clase .spacer-xx
            height: 0px + $i; // con un tamaño relativo al numero por el que avanza el bucle
        }
    }
}

Esto, en el CSS normal que generará, sería algo como…

.spacer-10 { height: 10px; }
.spacer-20 { height: 20px; }
.spacer-30 { height: 30px; }
.spacer-40 { height: 40px; }
.spacer-50 { height: 50px; }
.spacer-60 { height: 60px; }
.spacer-70 { height: 70px; }
.spacer-80 { height: 80px; }
.spacer-90 { height: 90px; }
.spacer-100 { height: 100px; }

Y el uso que se le puede dar es… cualquiera. Desde objetivos sencillos como este a cosas más elaboradas, usando escalas de colores por ejemplo. Lo que sea que necesite una iteración.