Las listas son una de las herramientas más complejas de Sass. Hace poco me ha tocado trabajar con ellas y al descubrir cómo funcionan la verdad me ha sorprendido la flexibilidad y facilidad de crear estilos muy complejos con tan solo unas pocas líneas de código.
Veremos cómo crear listas, lo permisivo que es Sass para definirlas, algunas funciones relacionadas con las listas y un par de ejemplos.
Declarando una lista
La manera básica de declarar una lista en Sass es de la siguiente manera:
$list: 'value-1', 'value-2', 'value-3';
$anotherList: 'value-1' 'value-2' 'value-3';Como podemos ver, las listas pueden estar separadas por comas o no, cualquiera de las dos maneras de declararlas es válida.
También tengamos en cuenta de que las comillas las podemos eliminar si es necesario, mientras no tengan ningún carácter especial. Por lo que lo siguiente también es válido:
$list: value-1, value-2, value-3;Además podemos meter listas dentro de listas, pero hay que tener siempre mucho cuidado al declararlas ya que puede quedar un código muy confuso:
$list: (
('value1', 'value2', 'value3'),
('value4', 'value5', 'value6')
)//Lista de listas separadas por comas
$list: 'value1' 'value2', 'value3', 'value4';
Cualquiera de las dos maneras es válida, mientras tengamos cuidado con la comprensión de nuestro código podemos emplear cualquier método de los vistos arriba.
Funciones con vistas
Antes de enumerar algunas funciones es importante saber que el primer índice de una lista es el 1, no empieza por 0.
- nth($list, $index): Devuelve el elemento de la lista $list en el índice $index.
Si el valor de $index es inválido, o nos confundimos (como me ha pasado a mi la primera vez), y queremos obtener el primer elemento de una vista poniendo un 0 en vez de 1, Sass nos lanzará un error al compilar nuestro código. - length($list): Devuelve la cantidad de elementos de la lista $list.
Como nota adicional, es importante saber que cualquier variable de Sass es tomada como una lista, por lo que su valor por defecto siempre será 1. Una lista vacía tiene una longitud de 0. - index($list, $value): Retorna el primer índice de la búsqueda de $value en $list. Si no encuentra nada retorna false.
- join($list1, $list2[, $separator]): Mergea $list1 y $list2 usando $separator como separador de los elementos de la lista final. Por defecto toma el separador de $list1
- append($list, $value[, $separator]): Añade $value al final de $list usando $separator como separador. Por defecto toma el separador de $list.
Algunos ejemplos
Si tenemos varias secciones de nuestra web que tienen estilos muy parecidos, podemos juntarlas en una lista y ahorrarnos mucho código de la siguiente manera.
$idList: 'id1', 'id2', 'id3';
@each $item in $idList {
#{$item} {
//Nuestros estilos aquí.
}
}Para definir los hexadecimales de una paleta de colores, por ejemplo, podemos hacer lo siguiente:
$colors: red #FF0000, black #000000, white #FFFFFF;
@each $color in $colors {
.color-#{nth($color, 1)} {
background-color: nth($color, 2);
}
}Conclusiones
Tener varias maneras de hacer lo mismo con las listas de Sass hace que todo sea un poco complicado, pero la simpleza de código y la facilidad de su mantenimiento merece que las usemos las listas y aprovechemos al máximo su potencia.