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:

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:

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:

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.

   

Deja un comentario