Articles
Introduktion til SASS/SCSS
Lister i SASS

Lister i SASS

Denne artikel forklarer lister i SASS.

Vi vil dække det grundlæggende og avancerede brug af SASS-lister og give praktiske eksempler.

YouTube Video

Lister i SASS

SASS tilbyder nyttige programmeringslignende funktioner som en udvidelse til CSS. Blandt disse er lister en meget nyttig funktion, når man definerer styles dynamisk.

Hvad er en SASS-liste?

En SASS-liste er en samling værdier adskilt af kommaer (,) eller mellemrum. De bruges, når man sender flere værdier til CSS-egenskaber eller udfører iterationer.

1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;

De vigtigste egenskaber ved lister omfatter følgende punkter:.

  • En liste kan indeholde værdier af enhver datatype, såsom tal, tekststrenge eller farver.
  • Du kan vælge mellem komma-adskilte og mellemrum-adskilte lister afhængigt af brugssituationen.

Grundlæggende eksempel på stildefinition med lister

Nedenfor er et eksempel på, hvordan man dynamisk kan generere simple kantstile ved hjælp af 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}

Kompileringsoutput 

 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()-funktionen fra sass:list-modulet kan du hente en bestemt værdi fra en liste.

Listerhåndtering

Modulet sass:list tilbyder funktioner til at manipulere lister, hvilket gør det nemt at hente og tilføje elementer..

Hent et element: nth()

nth() er en funktion, der henter 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 kode bruges nth()-funktionen til at hente værdien ved den angivne indeks.

Tjek indekset: index()

index() er en funktion, der returnerer positionen af et element i en liste.

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3
  • I denne kode bruges index() til at finde ud af, at elementet blue er det tredje element i listen.

Hent listelængde: length()

length() er en funktion, der returnerer længden af en liste.

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3
  • I denne kode bruges length()-funktionen til at hente antallet af værdier i listen.

Tilføj et element: append()

append() er en funktion, der bruges til at tilføje elementer til en liste.

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle
  • I denne kode bruges append()-funktionen til at tilføje en værdi til listen.

Erstat et element: set-nth()

set-nth() er en funktion, der erstatter elementet på en bestemt position med en anden værdi.

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue
  • I denne kode bruges set-nth() til at erstatte det andet element med yellow.

Kombiner lister: join()

join() er en funktion, der 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 kode bruges join() til at kombinere to lister til én.

Par lister: zip()

zip() er en funktion, der 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 kode bruges zip() til at kombinere navne og aldre som par.

Indlejrede lister

Lister kan også være indlejrede, så de kan bruges som todimensionelle arrays.

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 at håndtere sådanne komplekse datastrukturer bliver avanceret stilgenerering mulig.

Praktisk eksempel: Generering af gradienter

Her er et eksempel på effektiv generering af gradienter ved hjælp af 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}

Kompileringsoutput 

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}

  • Denne kode er et eksempel på automatisk generering af gradienter ved hjælp af lister i SCSS.

    • Farverne, der bruges til gradienten, er defineret i $colors-listen.
    • I gradient()-funktionen beregnes en position og tildeles jævnt til hver farve baseret på antallet af farver, hvilket skaber en liste til gradienten.
    • I .background-klassen bruges linear-gradient til at kombinere den genererede farveliste og anvende en vandret gradient.

  • Da positionerne automatisk beregnes efter længden af farvelisten, kan du nemt oprette en jævn gradient ved at tilføje eller ændre farver.

Advarsler og bedste praksis

Følgende punkter kan overvejes, når man bruger lister:.

  • Listeseparator type Komma-adskilte og mellemrum-adskilte lister behandles forskelligt, så du skal vælge passende efter situationen.

  • Listestørrelse Når du manipulerer lister dynamisk, er det en god idé at kontrollere størrelsen med length()-funktionen.

  • Håndtering af indlejrede lister Når du håndterer indlejrede lister, kan omhyggelig brug af indekser hjælpe med at undgå fejl.

Konklusion

SASS-lister er et kraftfuldt værktøj til at definere styles dynamisk og effektivt håndtere komplekse design.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Strenge i SASSMaps i SASS