Sass luettelofunktiot

Sass luettelofunktiot

Lista-funktiot käytetään arvojen saamiseen listasta, listojen yhdistämiseen ja kohteiden lisäämiseen listaan.

Sass-listat ovat muuttumattomia (ne eivät voi muuttua). Siksi lista-funktiot palauttavat uuden listan eivätkä muuta alkuperäistä listaa.

Sass-listat perustuvat 1:een. Listan ensimmäinen elementti sijaitsee indeksissä 1, ei 0.

Alla luetellaan kaikki Sassin listafunktiot:

Funktio Kuvaus ja esimerkki
lisää(lista, arvo, [separator])

Lisätään yksittäinen arvo listan loppuun.
Erottimet voivat olla auto, pilkku tai välilyönti. Auto on oletusarvo.

Esimerkki:

lisää((a b c), d)

Tulos: a b c d

lisää((a b c), (d), pilkku)

Tulos: a, b, c, d

index(lista, arvo)

Palauttaa arvon indeksin listassa.

Esimerkki:

index(a b c, b)

Tulos: 2

index(a b c, f)

Tulos: null

on-bracketed(lista)

Tarkistetaan, onko listassa sulkeet.

Esimerkki:

on-bracketed([a b c])

Tulos: true

on-bracketed(a b c)

Tulos: false

yhdistä(list1, list2, [separator, bracketed)]

Asetetaan list2 liitetään list1 lopussa.
Erottimet voivat olla auto, pilkku tai välilyönti.
Auto on oletusarvo (käytetään ensimmäisen listan erottimena).
bracketed Voivat olla auto, true tai false. Auto on oletusarvo.

Esimerkki:

yhdistä(a b c, d e f)

Tulos: a b c d e f

yhdistä((a b c), (d e f), pilkku)

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

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

Tulos: [a b c d e f]

length(lista)

Palauttaa listan pituuden.

Esimerkki:

length(a b c)

Tulos: 3

list-separator(lista)

Palauttaa käytetyn listan erotusmerkin merkkijonona. Voisi olla space tai comma.

Esimerkki:

list-separator(a b c)

Tulos: "space"

list-separator(a, b, c)

Tulos: "comma"

nth(lista, n)

Palauttaa listan n:nnen elementin.

Esimerkki:

nth(a b c, 3)

Tulos: c

set-nth(lista, n, arvo)

Aseta n:nnen listan elementti määritettyyn arvoon.

Esimerkki:

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

Tulos: a x c

zip(lists)

Yhdistä listat yksittäiseksi moniulotteiseksi listaksi.

Esimerkki:

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

Tulos: 1px solid red, 2px dashed green, 3px dotted blue