Lister i SASS
Denne artikkelen forklarer lister i SASS.
Vi vil dekke grunnleggende og avanserte bruksområder av SASS-lister og gi praktiske eksempler.
YouTube Video
Lister i SASS
SASS tilbyr nyttige funksjoner som ligner på programmering som utvidelse til CSS. Blant disse er lister en svært brukbar funksjon når man definerer stiler dynamisk.
Hva er en SASS-liste?
En SASS-liste er en samling av verdier adskilt med komma (,
) eller mellomrom. De brukes når man sender flere verdier til CSS-egenskaper eller utfører iterasjoner.
1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;
Hovedtrekk ved lister inkluderer følgende punkter:.
- En liste kan inneholde verdier av hvilken som helst datatyp, som tall, strenger eller farger.
- Du kan velge mellom komma-separerte og mellomrom-separerte lister avhengig av bruksområdet.
Grunnleggende eksempel på stildefinisjon ved bruk av lister
Nedenfor er et eksempel på dynamisk generering av enkle border-stiler ved bruk av lister.
1@use "sass:list";
2
3$border-widths: 1px, 2px, 3px;
4
5.border-example {
6 @for $i from 1 through list.length($border-widths) {
7 &-#{list.nth($border-widths, $i)} {
8 border-width: list.nth($border-widths, $i);
9 }
10 }
11}
Kompilert output
1.border-example-1px {
2 border-width: 1px;
3}
4
5.border-example-2px {
6 border-width: 2px;
7}
8
9.border-example-3px {
10 border-width: 3px;
11}
- Med
nth()
-funksjonen isass:list
-modulen kan du hente en spesifikk verdi fra en liste.
Listehåndtering
Modulen
sass:list gir funksjoner for å manipulere lister, noe som gjør det enkelt å hente og legge til elementer.
.
Hente ut et element: nth()
nth()
er en funksjon som henter ut et element fra en liste.
1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red
- I denne koden brukes
nth()
-funksjonen for å hente verdien på det angitte indeksen.
Sjekk indeksen: index()
index()
er en funksjon som returnerer posisjonen til et element i en liste.
1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3
- I denne koden brukes
index()
for å finne ut at elementetblue
er det tredje elementet i listen.
Hente langten på listen: length()
length()
er en funksjon som returnerer lengden på en liste.
1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3
- I denne koden brukes
length()
-funksjonen for å hente antall verdier i listen.
Legge til et element: append()
append()
er en funksjon som brukes for å legge til elementer i en liste.
1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle
- I denne koden brukes
append()
-funksjonen for å legge til en verdi i listen.
Erstatt et element: set-nth()
set-nth()
er en funksjon som erstatter elementet på en angitt posisjon med en annen verdi.
1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue
- I denne koden brukes
set-nth()
for å erstatte det andre elementet medyellow
.
Kombiner lister: join()
join()
er en funksjon som kombinerer to lister.
1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d
- I denne koden brukes
join()
for å slå sammen to lister til én.
Par lister: zip()
zip()
er en funksjon som grupperer flere lister element for element.
1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)
- I denne koden brukes
zip()
for å kombinere navn og aldre som par.
Nested lister
Lister kan også nestes, noe som gjør at de kan brukes som todimensjonale matriser.
1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red
- Ved å håndtere slike komplekse datastrukturer blir avansert stilgenerering mulig.
Praktisk eksempel: Generering av gradienter
Her er et eksempel på effektiv generering av gradienter ved bruk av lister.
1@use "sass:list";
2@use "sass:math";
3
4$colors: red, orange, yellow, green, blue;
5
6@function gradient($colors) {
7 $gradient: ();
8 $len: list.length($colors);
9
10 @for $i from 1 through $len {
11 // build "color percent%" string with interpolation
12 $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13 $gradient: list.append($gradient, $item);
14 }
15
16 @return $gradient;
17}
18
19.background {
20 background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}
Kompilert output
1.background {
2 background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}
-
Denne koden er et eksempel på automatisk generering av gradienter ved bruk av lister i SCSS.
- Fargene som brukes til gradienten er definert i
$colors
-listen. - I
gradient()
-funksjonen beregnes en posisjon og fordeles jevnt til hver farge basert på antall farger, og det opprettes en liste for gradienten. - I
.background
-klassen brukeslinear-gradient
for å kombinere den genererte fargelisten og anvende en horisontal gradient.
- Fargene som brukes til gradienten er definert i
-
Siden posisjonene automatisk beregnes i henhold til lengden på fargelisten, kan du enkelt lage en jevn gradient ved å legge til eller endre farger.
Advarsler og beste praksis
Følgende punkter kan vurderes ved bruk av lister:.
-
Liste-separatortype Komma-separerte og mellomrom-separerte lister behandles forskjellig, så du må velge riktig avhengig av situasjonen.
-
Liste-størrelse Når du manipulerer lister dynamisk, er det trygt å sjekke størrelsen med
length()
-funksjonen. -
Håndtering av nestede lister Når du håndterer nestede lister, kan nøye indeksoperasjoner hjelpe deg å unngå feil.
Konklusjon
SASS-lister er et kraftig verktøy for dynamisk å definere stiler og effektivt å håndtere komplekse design.
Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.