Listen in SASS

Dieser Artikel erklärt Listen in SASS.

Wir behandeln die Grundlagen und fortgeschrittene Anwendungen von SASS-Listen und bieten praktische Beispiele.

YouTube Video

Listen in SASS

SASS bietet als Erweiterung zu CSS nützliche, programmierähnliche Funktionen. Unter diesen Funktionen sind Listen besonders nützlich, wenn man Styles dynamisch definiert.

Was ist eine SASS-Liste?

Eine SASS-Liste ist eine Sammlung von Werten, die durch Kommas (,) oder Leerzeichen getrennt sind. Sie werden verwendet, wenn mehrere Werte an CSS-Eigenschaften übergeben oder Iterationen durchgeführt werden.

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

Die wichtigsten Merkmale von Listen umfassen die folgenden Punkte:.

• Eine Liste kann Werte beliebigen Datentyps enthalten, z. B. Zahlen, Zeichenketten oder Farben.
• Je nach Anwendungsfall können Sie zwischen Komma-getrennten und Leerzeichen-getrennten Listen wählen.

Grundbeispiel für die Stildefinition mit Listen

Nachfolgend ein Beispiel, wie mit Listen dynamisch einfache Rahmenstile erzeugt werden können.

 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}

Kompilierungsausgabe

 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}

• Mit der Funktion nth() des Moduls sass:list können Sie einen bestimmten Wert aus einer Liste abrufen.

Listenmanipulation

Das Modul sass:list bietet Funktionen zur Manipulation von Listen und macht es einfach, Elemente abzurufen und hinzuzufügen..

Ein Element abrufen: nth()

nth() ist eine Funktion, die ein Element aus einer Liste abruft.

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

• In diesem Code wird die Funktion nth() verwendet, um den Wert an einem bestimmten Index zu erhalten.

Index prüfen: index()

index() ist eine Funktion, die die Position eines Elements in einer Liste zurückgibt.

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

• In diesem Code wird index() verwendet, um festzustellen, dass das Element blue das dritte Element in der Liste ist.

Listengröße ermitteln: length()

length() ist eine Funktion, die die Länge einer Liste zurückgibt.

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

• In diesem Code wird die Funktion length() verwendet, um die Anzahl der Werte in der Liste zu erhalten.

Ein Element hinzufügen: append()

append() ist eine Funktion, um Elemente zu einer Liste hinzuzufügen.

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

• In diesem Code wird die Funktion append() verwendet, um einen Wert zur Liste hinzuzufügen.

Ein Element ersetzen: set-nth()

set-nth() ist eine Funktion, die das Element an einer bestimmten Position durch einen anderen Wert ersetzt.

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

• In diesem Code wird set-nth() verwendet, um das zweite Element durch yellow zu ersetzen.

Listen kombinieren: join()

join() ist eine Funktion, die zwei Listen kombiniert.

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

• In diesem Code wird join() verwendet, um zwei Listen zu einer zusammenzuführen.

Listen paarweise verbinden: zip()

zip() ist eine Funktion, die mehrere Listen Element für Element gruppiert.

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

• In diesem Code wird zip() verwendet, um Namen und Alter als Paare zu kombinieren.

Verschachtelte Listen

Listen können auch verschachtelt werden, wodurch sie wie zweidimensionale Arrays verwendet werden können.

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

• Durch den Umgang mit solch komplexen Datenstrukturen wird eine erweiterte Stilgenerierung möglich.

Praktisches Beispiel: Farbverläufe erzeugen

Hier ist ein Beispiel, wie Farbverläufe effizient mit Listen erzeugt werden können.

 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}

Kompilierungsausgabe

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

• Dieser Code ist ein Beispiel für die automatische Erzeugung von Farbverläufen mit Listen in SCSS.

  • Die für den Verlauf verwendeten Farben werden in der Liste $colors definiert.
  • In der Funktion gradient() wird eine Position berechnet und auf Basis der Anzahl der Farben gleichmäßig jeder Farbe zugewiesen, wodurch eine Liste für den Verlauf erstellt wird.
  • In der Klasse .background wird linear-gradient verwendet, um die erzeugte Farbliste zu kombinieren und einen horizontalen Verlauf anzuwenden.

• Da die Positionen automatisch entsprechend der Länge der Farbliste berechnet werden, können Sie ganz einfach einen gleichmäßigen Verlauf erstellen, indem Sie Farben hinzufügen oder ändern.

Hinweise und bewährte Praktiken

Beim Arbeiten mit Listen sollten folgende Punkte beachtet werden:.

• Listentrenner-Typ Komma-getrennte und Leerzeichen-getrennte Listen werden unterschiedlich behandelt; wählen Sie daher je nach Situation die passende Variante.

• Listengröße Beim dynamischen Bearbeiten von Listen ist es ratsam, die Größe mit der Funktion length() zu überprüfen.

• Verwaltung verschachtelter Listen Beim Umgang mit verschachtelten Listen hilft eine sorgfältige Indexverwaltung, Fehler zu vermeiden.

Fazit

SASS-Listen sind ein leistungsstarkes Werkzeug, um Styles dynamisch zu definieren und komplexe Designs effizient zu verwalten.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video