Articles
Introducción a SASS/SCSS
Listas en SASS

Listas en SASS

Este artículo explica las listas en SASS.

Cubriremos los conceptos básicos y los usos avanzados de las listas en SASS, y proporcionaremos ejemplos prácticos.

YouTube Video

Listas en SASS

SASS ofrece funciones útiles similares a la programación como una extensión de CSS. Entre ellas, las listas son una función muy útil al definir estilos de forma dinámica.

¿Qué es una lista en SASS?

Una lista en SASS es una colección de valores separados por comas (,) o espacios. Se utilizan al pasar varios valores a propiedades CSS o al realizar iteraciones.

1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;

Las principales características de las listas incluyen los siguientes puntos:.

  • Una lista puede contener valores de cualquier tipo de dato, como números, cadenas de texto o colores.
  • Puedes elegir entre listas separadas por comas o por espacios dependiendo del caso de uso.

Ejemplo básico de definición de estilos usando listas

A continuación hay un ejemplo de generación dinámica de estilos de borde simples utilizando listas.

 1@use "sass:list";
 2
 3$border-widths: 1px, 2px, 3px;
 4
 5.border-example {
 6  @for $i from 1 through list.length($border-widths) {
 7    &-#{list.nth($border-widths, $i)} {
 8      border-width: list.nth($border-widths, $i);
 9    }
10  }
11}

Resultado de la compilación 

 1.border-example-1px {
 2  border-width: 1px;
 3}
 4
 5.border-example-2px {
 6  border-width: 2px;
 7}
 8
 9.border-example-3px {
10  border-width: 3px;
11}
  • Con la función nth() del módulo sass:list, puedes obtener un valor específico de una lista.

Manipulación de listas

El módulo sass:list proporciona funciones para manipular listas, lo que facilita recuperar y agregar elementos.

Obtener un elemento: nth()

nth() es una función que obtiene un elemento de una lista.

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red
  • En este código, la función nth() se utiliza para obtener el valor en el índice especificado.

Verificar el índice: index()

index() es una función que devuelve la posición de un elemento en una lista.

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3
  • En este código, index() se utiliza para obtener que el elemento blue es el tercer elemento en la lista.

Obtener la longitud de la lista: length()

length() es una función que devuelve la longitud de una lista.

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3
  • En este código, la función length() se utiliza para obtener la cantidad de valores en la lista.

Agregar un elemento: append()

append() es una función utilizada para añadir elementos a una lista.

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle
  • En este código, la función append() se utiliza para añadir un valor a la lista.

Reemplazar un elemento: set-nth()

set-nth() es una función que reemplaza el elemento en una posición especificada con otro valor.

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue
  • En este código, set-nth() se utiliza para reemplazar el segundo elemento con yellow.

Combinar listas: join()

join() es una función que combina dos listas.

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d
  • En este código, join() se utiliza para combinar dos listas en una sola.

Emparejar listas: zip()

zip() es una función que agrupa varias listas elemento a elemento.

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)
  • En este código, zip() se utiliza para combinar nombres y edades como pares.

Listas anidadas

Las listas también pueden anidarse, permitiendo utilizarlas como arreglos bidimensionales.

1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red
  • Al manejar estructuras de datos tan complejas, es posible generar estilos avanzados.

Ejemplo práctico: Generación de degradados

Aquí tienes un ejemplo de cómo generar degradados de manera eficiente usando listas.

 1@use "sass:list";
 2@use "sass:math";
 3
 4$colors: red, orange, yellow, green, blue;
 5
 6@function gradient($colors) {
 7  $gradient: ();
 8  $len: list.length($colors);
 9
10  @for $i from 1 through $len {
11    // build "color percent%" string with interpolation
12    $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13    $gradient: list.append($gradient, $item);
14  }
15
16  @return $gradient;
17}
18
19.background {
20  background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}

Resultado de la compilación 

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}

  • Este código es un ejemplo de cómo generar degradados automáticamente usando listas en SCSS.

    • Los colores utilizados para el degradado se definen en la lista $colors.
    • En la función gradient(), se calcula una posición y se asigna uniformemente a cada color según la cantidad de colores, creando una lista para el degradado.
    • En la clase .background, se utiliza linear-gradient para combinar la lista de colores generada y aplicar un degradado horizontal.

  • Puesto que las posiciones se calculan automáticamente de acuerdo a la longitud de la lista de colores, puedes crear fácilmente un degradado uniforme añadiendo o cambiando colores.

Advertencias y buenas prácticas

Se deben considerar los siguientes puntos al utilizar listas:.

  • Tipo de separador de listas Las listas separadas por comas y por espacios se tratan de manera diferente, por lo que debes elegir la adecuada según la situación.

  • Tamaño de la lista Al manipular listas de forma dinámica, es recomendable comprobar el tamaño usando la función length().

  • Gestión de listas anidadas Al manejar listas anidadas, operaciones cuidadosas sobre los índices pueden ayudar a evitar errores.

Conclusión

Las listas en SASS son una herramienta poderosa para definir estilos dinámicamente y gestionar diseños complejos de manera eficiente.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Cadenas en SASSMapas en SASS