Usar arrays en SASS
A pesar de ser una herramienta mas o menos vieja, desde hace más de 10 años SASS es uno de mis mejores amigos en el desarrollo web, sigue siendo extremadamente poderoso aún con los numerosos avances de CSS en los últimos años, porque aún posee varias herramientas que CSS no, y siguen siendo útiles, como por ejemplo la habilidad de usar arrays en sass.
¿SASS?
SASS es un pre-procesador de CSS, piénsalo como un compilador en el sentido un poco más técnico (ojo, no es en realidad un compilador). Lo que hace es brindarnos un nuevo set de herramientas que son transformadas en CSS real al momento de correr el procesador, esto nos da herramientas como mix-ins, nesting, inheritance, etc.
Uno de los ejemplos más utilizados de éstas herramientas es la habilidad de usar arrays en sass (o vectores, como decían mis maestros en la escuela). Esto nos permite crear loops, mapas, etc. Así podemos compartir información entre nuestros archivos y hasta ahorrarnos varias lineas de código.
En SASS, los arrays son conocidos como listas, en su versión más básica, una lista es declarada de la siguiente forma:
1$colores: amarillo, azul, rojo, verde;2
De ésta forma, podemos acceder a cualquier elemento en el array con la función nth
:
1$colores: amarillo, azul, rojo, verde;2@debug nth($colores, 2);3// style.scss:3 Debug: azul4
Usos
Ahora que tenemos nuestra lista declarada, podemos comenzar a dale uso como se
debe, el uso más común que me he encontrado es el de la impresión de utility
classes, como por ejemplo al crear un loop con @each
:
1$colores: amarillo, azul, rojo, verde;2@each $color in $colores {3 .texto-#{$color} {4 color: $color;5 }6}7// Output:8.texto-amarillo {9 color: amarillo;10}11.texto-azul {12 color: azul;13}14.texto-rojo {15 color: rojo;16}17.texto-verde {18 color: verde;19}20
Mezclando SASS con CSS
Si te das cuenta, para imprimir el nombre de la clase estamos envoliendo la variable dentro de unos extraños símbolos #. Esto lo necesitamos para que SASS reconozca que lo que ésta dentro de ellos debe ser convertido a su verdadero valor en lugar de imprimir la variable como tal.
.texto-#{$color} // .texto-amarillo
.texto-$color // .texto-$color
En cambio, al utilizar variales como valor de la propiedad, esto no es necesario a menos que tambien la mezclemos con texto regular, si no, SASS lo hará automáticamente.
color: $color; // color: amarillo
Expandiendo
¡Listo! Esa es una manera simple de crear y utilzar arrays (o listas) en SASS, como puedes ver es muy sencilla, pero ahora ¿Qué sigue? ¿Qué otros usos crees que se le puedan dar? No dudes en contactarme para cualquier pregunta o dejar un comentario con otros usos que se le puedan dar. ¡Nos vemos!