Más sobre datos: las listas

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:

Siempre son numéricas.
Son consecutivas (después del elemento 2 siempre viene el 3, no el 5, o el 20, o cualquier otro).
Empiezan a contar desde 1, no desde 0 cómo ocurre con los índices de matrices en la mayoría de los lenguajes.

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:

$bordersList: (
    (1px 2px 3px 4px 0.5rem),
    (solid, dotted, dashed, groove, ridge),
    (#e0752f #f9e805 #008000 #090080 #8b0000)
)

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

@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();

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

/* 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;
}