Funções de Lista Sass

Funções de Lista Sass

List functions are used to access values in the list, combine lists, and add items to the list.

Sass lists are immutable (they cannot be changed). Therefore, list functions that return a list return a new list without changing the original list.

Sass lists are based on 1. The first list item in the list is at index 1, not 0.

Below is a list of all list functions in Sass:

function description & example
append(list, value, [separator])

add a single value to the end of the list.
The separator can be auto, comma or space. auto is the default value.

Exemplo:

append((a b c), d)

result: a b c d

append((a b c), (d), comma)

result: a, b, c, d
index(list, value)

return the index position of the value in the list.

Exemplo:

index(a b c, b)

result: 2

index(a b c, f)

result: null
is-bracketed(list)

check if the list has brackets.

Exemplo:

is-bracketed([a b c])

result: true

is-bracketed(a b c)

result: false
join(list1, list2, [separator, bracketed)]

will list2 append to list1 at the end.
The separator can be auto, comma or space.
auto is the default value (the separator from the first list will be used).
bracketed can be auto, true or false. auto is the default value.

Exemplo:

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)

Resultados: [a b c d e f]
length(list)

Retorna o comprimento da lista.

Exemplo:

length(a b c)

Resultados: 3
list-separator(list)

Retorna o delimitador de lista usado em string. Pode ser space ou comma.

Exemplo:

list-separator(a b c)

Resultados: "space"

list-separator(a, b, c)

Resultados: "comma"
nth(list, n)

Retorna o elemento n-ésimo da lista.

Exemplo:

nth(a b c, 3)

Resultados: c
set-nth(list, n, value)

Define o elemento da lista n-ésima como o valor especificado.

Exemplo:

set-nth(a b c, 2, x)

Resultados: a x c
zip(lists)

Combine listas em uma única lista multidimensional.

Exemplo:

zip(1px 2px 3px, sólido tracejado pontilhado, vermelho verde azul)

Resultados: 1px sólido vermelho, 2px tracejado verde, 3px pontilhado azul