Lijsten in SASS

Dit artikel legt lijsten in SASS uit.

We behandelen de basis en geavanceerde toepassingen van SASS-lijsten en geven praktische voorbeelden.

YouTube Video

Lijsten in SASS

SASS biedt handige programmeerachtige functies als uitbreiding op CSS. Daarvan zijn lijsten een zeer nuttige functie bij het dynamisch definiëren van stijlen.

Wat is een SASS-lijst?

Een SASS-lijst is een verzameling waarden, gescheiden door komma’s (,) of spaties. Ze worden gebruikt bij het doorgeven van meerdere waarden aan CSS-eigenschappen of bij iteraties.

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

De belangrijkste kenmerken van lijsten zijn onder andere de volgende punten:.

• Een lijst kan waarden van elk gegevenstype bevatten, zoals getallen, tekst of kleuren.
• Afhankelijk van het gebruik kun je kiezen tussen komma-gescheiden en spatie-gescheiden lijsten.

Basisvoorbeeld van stijldefinitie met lijsten

Hieronder staat een voorbeeld van het dynamisch genereren van eenvoudige randstijlen met behulp van lijsten.

 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}

Compilatie-uitvoer

 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}

• Met de nth()-functie van de sass:list-module kun je een specifieke waarde uit een lijst halen.

Lijstmanipulatie

De module sass:list biedt functies om met lijsten te werken, waardoor het eenvoudig is om elementen op te halen en toe te voegen..

Element ophalen: nth()

nth() is een functie die een element uit een lijst haalt.

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

• In deze code wordt de nth()-functie gebruikt om de waarde op de opgegeven index te halen.

Controleer de index: index()

index() is een functie die de positie van een element in een lijst retourneert.

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

• In deze code wordt index() gebruikt om te bepalen dat het element blue het derde item in de lijst is.

Lijstlengte ophalen: length()

length() is een functie die de lengte van een lijst retourneert.

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

• In deze code wordt de length()-functie gebruikt om het aantal waarden in de lijst te achterhalen.

Element toevoegen: append()

append() is een functie waarmee je elementen aan een lijst toevoegt.

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

• In deze code wordt de append()-functie gebruikt om een waarde aan de lijst toe te voegen.

Vervang een element: set-nth()

set-nth() is een functie die het element op een opgegeven positie vervangt door een andere waarde.

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

• In deze code wordt set-nth() gebruikt om het tweede element te vervangen door yellow.

Lijsten combineren: join()

join() is een functie die twee lijsten combineert.

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

• In deze code wordt join() gebruikt om twee lijsten tot één lijst te combineren.

Lijsten koppelen: zip()

zip() is een functie die meerdere lijsten element voor element groepeert.

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)

• In deze code wordt zip() gebruikt om namen en leeftijden als paren te combineren.

Gegeneste lijsten

Lijsten kunnen ook genest zijn, waardoor ze gebruikt kunnen worden als tweedimensionale 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

• Door zulke complexe datastructuren te gebruiken, wordt geavanceerde stijl generatie mogelijk.

Praktisch voorbeeld: Kleurovergangen genereren

Hier volgt een voorbeeld van het efficiënt genereren van gradients met behulp van lijsten.

 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}

Compilatie-uitvoer

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

• Deze code is een voorbeeld van het automatisch genereren van kleurovergangen met lijsten in SCSS.

  • De kleuren die voor de gradient worden gebruikt, zijn gedefinieerd in de lijst $colors.
  • In de gradient()-functie wordt een positie berekend en gelijkmatig aan elke kleur toegewezen op basis van het aantal kleuren, waardoor een lijst voor de gradient wordt gemaakt.
  • In de .background-klasse wordt linear-gradient gebruikt om de gegenereerde kleurenlijst te combineren en een horizontale gradient toe te passen.

• Omdat de posities automatisch worden berekend op basis van de lengte van de kleurenlijst, kun je eenvoudig een gelijkmatige gradient maken door kleuren toe te voegen of te wijzigen.

Aandachtspunten en best practices

De volgende aandachtspunten zijn belangrijk bij het werken met lijsten:.

• Type lijstscheiding Komma-gescheiden en spatie-gescheiden lijsten worden anders behandeld, dus kies afhankelijk van de situatie het juiste type.

• Lijstgrootte Controleer bij dynamische lijstmanipulatie altijd de grootte met de functie length().

• Gegeneste lijsten beheren Bij het werken met geneste lijsten kun je fouten voorkomen door zorgvuldig met indexen om te gaan.

Conclusie

SASS-lijsten zijn een krachtig hulpmiddel om stijlen dynamisch te definiëren en complexe ontwerpen efficiënt te beheren.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video