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 i sass: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 elementet blue 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 med yellow.

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 brukes linear-gradient for å kombinere den genererte fargelisten og anvende en horisontal gradient.
  • 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.

YouTube Video