Liste og kartfunksjoner i Sass | Forklart

Sass, kort for syntaktisk fantastiske stilark, støtter bruken av forskjellige variabler, mixins, funksjoner osv. Som til gjengjeld forbedrer muligheten til det grunnleggende CSS -språket. Hvis vi snakker om funksjonene, er det funksjoner for strenger, numeriske verdier, lister, kart osv. Funksjonene som er diskutert i denne artikkelen er liste- og kartfunksjoner.

La oss komme i gang.

Listefunksjoner i Sass

SASS -listefunksjoner brukes til å manipulere lister som evaluere listeverdier, bli med på lister eller sette inn elementer i en liste. Imidlertid er SASS -lister stive og gir ingen endring, derfor endrer ikke listefunksjonene som henter en ny liste ikke den originale.

Som strenger er SASS-lister også 1-baserte, noe som betyr at det første listeelementet blir lagret ved indeks 1 i stedet for 0.

vedlegg (liste, verdi, [separator]) funksjon

Denne funksjonen legger ved en enkelt verdi på slutten av listen. En separator kan gjengi verdier som auto (standard), komma eller plass.

Eksempel

vedlegg ((a, b, c), (d), komma)

Produksjon

A, B, C, D

Hvis det brukes plass.

Eksempel

vedlegg ((a, b, c), (d), plass)

Produksjon

A B C D

indeks (liste, verdi) funksjon

Denne funksjonen henter indeksposisjonen til verdien som er spesifisert i listen.

Eksempel

indeks ((a, b, c, e, f), 3)

Produksjon

c

IS-Bracketed (List) -funksjon

Denne funksjonen evaluerer om den gitte listen består av firkantede parenteser eller ikke. Resultatet er i form av ekte eller usant.

Eksempel

IS-Bracketed ([1 2 3])

Produksjon

ekte

Hvis det ikke er firkantede parenteser.

Eksempel

IS-Bracketed (1 2 3)

Produksjon

falsk

Join (List1, List2, [Separator, Bracketed]) Funksjon

Denne funksjonen legger ved den andre listen gitt på slutten av den første gitte listen. En separator kan gjengi verdier som Auto (standard), komma eller plass, i mellomtiden kan Bracketed utvise auto (standard), sanne eller falske verdier.

Eksempel

Bli med (A B C, D E F)

Produksjon

A B C D E F

Når en separator brukes.

Eksempel

Bli med ((A B C), (D E F), Komma)

Produksjon

A B C D E F

Når en braket brukes.

Eksempel

Bli med (A B C, D E F, $ BRACKETED: SANN)

Produksjon

[A B C D E F]

lengde (liste) funksjon

For å hente lengden på listen, blir denne funksjonen brukt.

Eksempel

lengde (a, b, c, d)

Produksjon

4

Liste-separator (liste) -funksjon

Denne funksjonen henter separatoren som brukes i listen som en streng.

Eksempel

Liste-separator ((a b c))

Produksjon

"rom"

nth (liste, n) funksjon

For å hente det nde elementet som er spesifisert i listen, brukes denne funksjonen.

Eksempel

nth (a, b, c, 4)

Produksjon

4

set-nth (liste, n, verdi) funksjon

Denne funksjonen gir verdien som er spesifisert til det første nummeret i listen.

Eksempel

set-nth (a b c, 3, y)

Produksjon

A b y

ZIP (lister) funksjon

Denne funksjonen blir sammen med alle listene som er definert i en flerdimensjonal liste.

Eksempel

Zip (3px 4px 5px, prikket fast stiplet, lilla gul svart)

Produksjon

3px stiplet lilla, 4px solid gul, 5px stiplet svart

Nå som vi har lært om listefunksjoner, skal vi nå flytte til vårt neste diskusjonsemne.

Kartfunksjoner i Sass

Kart i Sass består av flere nøkkelverdipar som kan evalueres ved hjelp av kartfunksjoner. Dessuten kan du også bruke listefunksjoner for å undersøke kart i SASS, men når du gjør det, vil kart bli betraktet som lister med to elementer.

Akkurat som lister, er kart i Sass stive og viser ingen endring; Derfor endrer ikke kartfunksjonene som henter et nytt kart, det originale.

kart-get (kart, nøkkel) funksjon

Denne funksjonen henter verdien som er koblet til nøkkelen som er definert på kartet.

Eksempel

$ Farge: (“Svart”: #000000, “Purple”: #6A0DAD)
kart-get ($ farge, “lilla”)

Produksjon

#6A0DAD

Map-Has-Key (Map, Key) -funksjon

Denne funksjonen evaluerer om nøkkelen som er definert er til stede på kartet eller ikke og gir resultatet i enten sant eller usant.

Eksempel

$ Farge: (“Svart”: #000000, “Purple”: #6A0DAD)
Map-Has-Key ($ Color, “Yellow”)

Produksjon

falsk

Map-Keys (MAP) -funksjon

Denne funksjonen henter alle nøklene på et kart.

Eksempel

$ Farge: (“Svart”: #000000, “Purple”: #6A0DAD)
Map-Keys ($ farge)

Produksjon

“Svart”, “lilla”

Map-sammenslåing (MAP1, MAP2) -funksjon

For å feste MAP2 på slutten av MAP1 brukes denne funksjonen.

Eksempel

$ Farge: (“Svart”: #000000, “Purple”: #6A0DAD)
$ color1: (“rosa”: #FFC0CB, “Brown”: #964B00)
Map-sammenslåing ($ farge, $ color1)

Produksjon

Black ”: #000000,“ Purple ”: #6A0DAD,“ Pink ”: #FFC0CB,“ Brown ”: #964B00

Kartfjær (kart, nøkler ...) funksjon

Denne funksjonen eliminerer alle de uttalte nøklene fra kartet.

Eksempel

$ Farge: (“Pink”:#FFC0CB, “Brown”:#964B00, “Black”:#000000)
Map-Fjern ($ Color, “Brown”)

Produksjon

“Pink”:#FFC0CB, “Black”:#000000

kartverdier (kart) funksjon

Denne funksjonen henter alle verdiene som er til stede på kartet.

Eksempel

$ Farge: (“Pink”:#FFC0CB, “Brown”:#964B00, “Black”:#000000)
Kartverdier ($ farge)

Produksjon

#FFC0CB, #964B00, #000000

Konklusjon

SASS -listefunksjoner brukes til å manipulere lister som evaluere listeverdier, bli med på lister eller sette inn elementer i en liste. I mellomtiden består kart i Sass av flere nøkkelverdipar som kan evalueres ved hjelp av kartfunksjoner. Både lister og kart er stive og viser ingen endring; Derfor endrer ikke enhver funksjon som henter en ny liste eller kart den originale. Alle funksjonene tilknyttet lister og kart i Sass er forklart i denne artikkelen sammen med eksempler.