Sass Listfunktioner

Sass Listfunktioner

Listafunktioner används för att komma åt värden i listan, kombinera listor och lägga till objekt i listan.

Sass-listor är oförändrade (de kan inte ändras). Därför returnerar listafunktioner en ny lista utan att ändra den ursprungliga listan.

Sass-listor är baserade på 1. Den första listposten ligger på index 1, inte 0.

Nedan listas alla listafunktioner i Sass:

Funktion Beskrivning och exempel
append(list, value, [separator])

Lägg till ett enskilt värde i slutet av listan.
Avskiljaren kan vara auto, comma eller space. auto är standardvärdet.

Exempel:

append((a b c), d)

Resultat: a b c d

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

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

Returnera indexpositionen för värdet i listan.

Exempel:

index(a b c, b)

Resultat: 2

index(a b c, f)

Resultat: null
is-bracketed(list)

Kontrollera om listan har klamrar.

Exempel:

is-bracketed([a b c])

Resultat: true

is-bracketed(a b c)

Resultat: false
join(list1, list2, [separator, bracketed]

Lägg till list2 tillsammans med list1 sist
Avskiljaren kan vara auto, comma eller space.
auto är standardvärdet (den kommer att använda avskiljaren från den första listan).
bracketed Det kan vara auto, true eller false. auto är standardvärdet.

Exempel:

join(a b c, d e f)

Resultat: a b c d e f

join((a b c), (d e f), comma)

Resultat: a, b, c, d, e, f

join(a b c, d e f, $bracketed: true)

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

Returnera listans längd.

Exempel:

length(a b c)

Resultat: 3
list-separator(list)

Returnera den använda listseparatorn som sträng. Kan vara space eller comma.

Exempel:

list-separator(a b c)

Resultat: "space"

list-separator(a, b, c)

Resultat: "comma"
nth(list, n)

Returnera den n:de elementet i listan.

Exempel:

nth(a b c, 3)

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

Sätt den n:de listelementet till den specificerade värdet.

Exempel:

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

Resultat: a x c
zip(lists)

Kombinera listor till en enskild multidimensionell lista.

Exempel:

zip(1px 2px 3px, solid ripsad punkterad, red green blue)

Resultat: 1px solid red, 2px ripsad green, 3px punkterad blue