Las funciones de lista se utilizan para acceder a los valores de una lista, combinar listas y agregar elementos a las listas.

Las listas Sass son inmutables (no pueden cambiar). Por lo tanto, las funciones de lista que devuelven una lista devolverán una nueva lista y no cambiarán la lista original.

Las listas Sass están basadas en 1. El primer elemento de una lista está en el índice 1, no en el 0.

La siguiente tabla enumera todas las funciones de lista en Sass:

Función Descripción & Ejemplo
append(listvalue, [separator])

Agrega un solo valor al final de la lista. el separador puede ser automático, coma o espacio. automático es predeterminado.

Ejemplo:
append((a b c), d)
Result: a b c d
append((a b c), (d), comma)
Result: a, b, c, d

index(listvalue)

Devuelve la posición del índice para el valor en la lista.

Ejemplo:
index(a b c, b)
Result: 2
index(a b c, f)
Result: null

is-bracketed(list)

Comprueba si la lista tiene corchetes.

Ejemplo:
is-bracketed([a b c])
Result: true
is-bracketed(a b c)
Result: false

join(list1list2, [separator, bracketed])

Añade lista2 al final de lista1. el separador puede ser automático, coma o espacio. auto es predeterminado (usará el separador en la primera lista). entre paréntesis puede ser automático, verdadero o falso. automático es predeterminado.

Ejemplo:
join(a b c, d e f)
Result: a b c d e f
join((a b c), (d e f), comma)
Result: a, b, c, d, e, f
join(a b c, d e f, $bracketed: true)
Result: [a b c d e f]

length(list)

Devuelve la longitud de la lista.

Ejemplo:
length(a b c)
Result: 3

list-separator(list)

Devuelve el separador de lista utilizado, como una cadena. Puede ser espacio o coma.

Example:
list-separator(a b c)
Result: "space"
list-separator(a, b, c)
Result: "comma"

nth(listn)

Devuelve el n-ésimo elemento de la lista.

Ejemplo:
nth(a b c, 3)
Result: c

set-nth(listnvalue)

Establece el elemento n de la lista en el valor especificado.

Ejemplo:
set-nth(a b c, 2, x)
Result: a x c

zip(lists)

Combina listas en una sola lista multidimensional.

Ejemplo:
zip(1px 2px 3px, solid dashed dotted, red green blue)
Result: 1px solid red, 2px dashed green, 3px dotted blue