Listor i SASS

Den här artikeln förklarar listor i SASS.

Vi går igenom grunderna och avancerade användningar av SASS-listor och ger praktiska exempel.

YouTube Video

Listor i SASS

SASS erbjuder användbara programmeringsliknande funktioner som ett tillägg till CSS. Bland dessa är listor en mycket användbar funktion när du definierar stilar dynamiskt.

Vad är en SASS-lista?

En SASS-lista är en samling värden separerade med kommatecken (,) eller mellanslag. De används för att skicka flera värden till CSS-egenskaper eller för att iterera.

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

De viktigaste funktionerna med listor inkluderar följande punkter:.

• En lista kan innehålla värden av alla datatyper, såsom siffror, strängar eller färger.
• Du kan välja mellan kommatecken- eller blankstegsseparerade listor beroende på användning.

Grundläggande exempel på stildefinition med hjälp av listor

Nedan följer ett exempel på att dynamiskt generera enkla kantlinjestilar med hjälp av listor.

 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}

Kompileringsresultat

 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 funktionen nth() i modulen sass:list kan du hämta ett specifikt värde från en lista.

Listmanipulering

Sass:list-modulen tillhandahåller funktioner för att manipulera listor, vilket gör det enkelt att hämta och lägga till element.`.

Hämta ett element: nth()

nth() är en funktion som hämtar ett element ur en lista.

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red

• I denna kod används funktionen nth() för att hämta värdet vid den angivna indexpositionen.

Kontrollera indexet: index()

index() är en funktion som returnerar positionen för ett element i en lista.

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3

• I denna kod används index() för att ta reda på att elementet blue är det tredje i listan.

Hämta listans längd: length()

length() är en funktion som returnerar längden på en lista.

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3

• I denna kod används funktionen length() för att hämta antalet värden i listan.

Lägg till ett element: append()

append() är en funktion som används för att lägga till element i en lista.

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle

• I denna kod används funktionen append() för att lägga till ett värde i listan.

Ersätt ett element: set-nth()

set-nth() är en funktion som ersätter elementet på en angiven position med ett annat värde.

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue

• I denna kod används set-nth() för att ersätta det andra elementet med yellow.

Kombinera listor: join()

join() är en funktion som kombinerar två listor.

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d

• I denna kod används join() för att kombinera två listor till en.

Parvisa listor: zip()

zip() är en funktion som grupperar flera listor element-för-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 denna kod används zip() för att kombinera namn och åldrar som par.

Nästa listor

Listor kan också nästlas, vilket gör att de kan användas som tvådimensionella arrayer.

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

• Genom att hantera sådana komplexa datatyper blir avancerad stilgenerering möjlig.

Praktiskt exempel: Generera övertoningar

Här är ett exempel på hur man effektivt kan skapa övertoningar med hjälp av listor.

 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}

Kompileringsresultat

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

• Denna kod är ett exempel på att automatiskt generera övertoningar med hjälp av listor i SCSS.

  • Färgerna som används för övertoningen definieras i listan $colors.
  • I funktionen gradient() beräknas en position och tilldelas jämnt till varje färg baserat på antalet färger, vilket skapar en lista för övertoningen.
  • I klassen .background används linear-gradient för att kombinera den genererade färglistan och applicera en horisontell övertoning.

• Eftersom positionerna automatiskt beräknas utifrån längden på färglistan kan du enkelt skapa en jämn övertoning genom att lägga till eller ändra färger.

Varningar och bästa praxis

Följande punkter bör beaktas vid användning av listor:.

• Listavgränsare Kommaseparerade och blankstegsseparerade listor behandlas olika, så du måste välja lämpligen beroende på situation.

• Liststorlek Vid dynamisk hantering av listor är det säkrast att kontrollera storleken med funktionen length().

• Hantering av nästlade listor När du hanterar nästlade listor kan noggranna indexoperationer hjälpa till att undvika fel.

Slutsats

SASS-listor är ett kraftfullt verktyg för att dynamiskt definiera stilar och effektivt hantera komplexa designer.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video