En un artículo anterior conocimos unas colecciones de datos que se llaman mapas, y hemos visto algunos ejemplos de su uso. Aquí vamos a conocer otro modo de crear y manejar colecciones de datos de otro tipo: las listas. Sintácticamente, las listas son parecidas a los mapas, sólo que los valores se almacenan sin claves.
Las listas son elementos que ya están presentes en CSS natural. Por ejemplo, cuando escribes una regla del tipo border: 1px solid black;
estás asignándole a la propiedad border
una lista de valores (1px solid black
).
En SASS las listas dan más de sí, gracias a las funciones nativas del propio SASS. En este artículo aprenderemos algunas cosas interesantes que nos permitirán flexibilizar la sintaxis de nuestras hojas de estilos.
LAS LISTAS EN SASS
Las listas en SASS son colecciones de datos que se almacenan separados por comas, o espacios en blanco, y encerradas entre paréntesis. Por ejemplo, suponte una declaración como la siguiente:
$colorsList: (#e0752f #f9e805 #008000 #090080 #8b0000);
Como ves, se parecen mucho a los mapas, sólo que los valores no tienen una clave… al menos, no una que puedas ver o manipular.
ATENCIÓN. Por supuesto, los valores almacenados en una lista SÍ tienen clave. Por pura lógica, no se puede tener un diccionario (una colección de datos) si no se pueden referenciar los datos individualmente, y la única forma de hacer eso es mediante una clave. Lo que ocurre es que, a diferencia de los mapas, las claves en una lista son implícitas, es decir, no las decide ni asigna el desarrollador, sino que vienen dadas por el lenguaje. Si estás familiarizado con PHP, puedes considerar los mapas como matrices asociativas, y las listas como matrices indexadas, si me permites la analogía.
Hay tres cosas que debes saber sobre las claves en las listas:
|
Dado que podemos usar dos tipos de separadores para los elementos de una lista (la coma o el espacio en blanco), y que las listas se acotan mediante paréntesis, podemos formar listas complejas, en las que algunos, o todos los elementos, sean, a su vez, otra lista. Así, podríamos tener una lista para definir las propiedades de distintos tipos de bordes, como ves en el siguiente ejemplo:
1 2 3 4 5 |
$bordersList: ( (1px 2px 3px 4px 0.5rem), (solid, dotted, dashed, groove, ridge), (#e0752f #f9e805 #008000 #090080 #8b0000) ) |
Una vez más, puedes ver la similitud entre las listas y los mapas que ya conoces.
USANDO UNA LISTA
Vamos a ver un ejemplo muy simple de uso de una lista, mediante un mixin que crea una reglas CSS. Lo tenemos en lists_1.scss
:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@charset "UTF-8"; $colorsList: (#e0752f #f9e805 #008000 #090080 #8b0000); @mixin BGColors(){ @for $i from 1 through 5{ div:nth-of-type(#{$i}){ background-color: nth($colorsList, $i); } } } @include BGColors(); |
Observa la línea resaltada. La función nth()
es nativa de SASS. Permite localizar un elemento dentro de una lista. Recibe dos argumentos. El primero es el nombre de la lista y el segundo el índice del elemento. Al hacer la transpilación obtienes lists_1.css
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* line 7, scss/lists_1.scss */ div:nth-of-type(1) { background-color: #e0752f; } /* line 7, scss/lists_1.scss */ div:nth-of-type(2) { background-color: #f9e805; } /* line 7, scss/lists_1.scss */ div:nth-of-type(3) { background-color: #008000; } /* line 7, scss/lists_1.scss */ div:nth-of-type(4) { background-color: #090080; } /* line 7, scss/lists_1.scss */ div:nth-of-type(5) { background-color: #8b0000; } |
Cómo ves, estando ya familiarizados con los mapa, manejar las listas es muy sencillo. Si quieres conocer las funciones nativas de SASS que te facilitarán su uso, te recomiendo este enlace.
CONCLUYENDO
Ya tenemos otra dosis de cosas que podemos hacer con SASS. Lo cierto es que, a estas alturas, ya vamos teniendo una perspectiva bastante amplia del tema. En el próximo artículo veremos como SASS nos ayuda a optimizar el diseño de nuestras hojas de estilos cuando usamos media queries. Por lo demás, en este enlace tienes el código de este artículo para experimentar con él.