List- und Kartenfunktionen in Sass | Erklärt

SASS, kurz für syntaktisch fantastisches Stylesheet, unterstützt die Verwendung verschiedener Variablen, Mixins, Funktionen usw., die im Gegenzug die Fähigkeit der grundlegenden CSS -Sprache verbessert. Wenn wir über seine Funktionen sprechen, gibt es Funktionen für Zeichenfolgen, numerische Werte, Listen, Karten usw. Die in diesem Artikel erörterten Funktionen sind Liste und Kartenfunktionen.

Lass uns anfangen.

Listenfunktionen in Sass

SASS -Listenfunktionen werden verwendet, um Listen wie Evaluieren von Listenwerten, Verbindungslisten oder Einfügen von Elementen in eine Liste zu manipulieren. SASS -Listen sind jedoch starr und führen keine Änderungen vor.

Wie Strings sind Sass-Listen ebenfalls 1 basiert, was bedeutet, dass das erste Listenelement bei Index 1 und nicht 0 gespeichert wird.

Anhängen (Liste, Wert, [Separator]) Funktion

Diese Funktion hängt am Ende der Liste einen einzelnen Wert an. Ein Trennzeichen kann Werte wie automatisch (Standard), Komma oder Raum rendern.

Beispiel

anhängen ((a, b, c), (d), comma)

Ausgang

A B C D

Wenn Platz genutzt wird.

Beispiel

anhängen ((a, b, c), (d), Raum)

Ausgang

A B C D

Index- (Liste, Wert) Funktion

Diese Funktion holt die Indexposition des in der Liste angegebenen Werts ab.

Beispiel

Index ((a, b, c, e, f), 3)

Ausgang

C

Is-Spurted (List) -Funktion

Diese Funktion bewertet, ob die angegebene Liste aus quadratischen Klammern besteht oder nicht. Das Ergebnis liegt in der Form von wahr oder falsch.

Beispiel

ist verspannt ([1 2 3])

Ausgang

WAHR

Wenn es keine quadratischen Klammern gibt.

Beispiel

ist verspannt (1 2 3)

Ausgang

FALSCH

Join (List1, List2, [Separator, Klammer]) Funktion

Diese Funktion hängt die zweite Liste am Ende der ersten angegebenen Liste an. Ein Separator kann Werte wie Auto (Standard), Komma oder Raum rendern, in der Zwischenzeit können die Klammern automatisch (Standard), wahr oder falsche Werte aufweisen.

Beispiel

beitreten (a b c, d e f)

Ausgang

A b c d e f

Wenn ein Trennzeichen verwendet wird.

Beispiel

Treten Sie mit ((a b c), (d e f), comma)

Ausgang

A, b, c, d, e, f

Wenn eine Klammer verwendet wird.

Beispiel

Join (a b c, d e f, $ bracked: true)

Ausgang

[A, B, C, D, E, F]

Länge (Liste) Funktion

Zum Zweck des Abholens der Länge der Liste wird diese Funktion verwendet.

Beispiel

Länge (a, b, c, d)

Ausgang

4

List-Separator (List) -Funktion

Diese Funktion holt das in der Liste als Zeichenfolge verwendete Separator ab.

Beispiel

Listen-Separator ((a b c))

Ausgang

"Raum"

Nth (Liste, n) Funktion

Um das in der Liste angegebene n -te Element abzurufen, wird diese Funktion verwendet.

Beispiel

nth (a, b, c, 4)

Ausgang

4

SET-Nth (Liste, N, Wert) Funktion

Diese Funktion ergibt den Wert der N -ten Nummer in der Liste.

Beispiel

set-nte (a b c, 3, y)

Ausgang

A b y

ZIP -Funktion (Listen)

Diese Funktion verbindet alle Listen in einer mehrdimensionalen Liste.

Beispiel

ZIP (3px 4px 5px, geschnittenes festes gestricheltes, lila gelbes Schwarz)

Ausgang

3px gepunktete lila, 4px massiv gelb, 5px gestrichelt schwarz

Nachdem wir über Listenfunktionen erfahren haben, werden wir nun zu unserem nächsten Diskussionsthema übergehen.

Kartenfunktionen in Sass

Karten in SASS bestehen aus mehreren Schlüsselwertpaaren, die mit Kartenfunktionen bewertet werden können. Darüber hinaus können Sie auch Listenfunktionen verwenden, um Karten in SASS zu untersuchen. Wenn Sie dies tun, werden Karten jedoch als Listen mit zwei Elementen betrachtet.

Genau wie Listen sind Karten in Sass starr und weisen keine Änderung auf. Daher verändert die Kartenfunktion, die eine neue Karte abrufen.

MAP-GET-Funktion (Karte, Schlüssel)

Diese Funktion holt den Wert, der mit dem in der Karte definierten Schlüssel verknüpft ist.

Beispiel

$ color: ("schwarz": #000000, "lila": #6a0dad)
Map-Get ($ color, "lila")

Ausgang

#6a0dad

MAP-HAS-KEY-Funktion (Karte, Schlüssel)

Diese Funktion bewertet, ob der definierte Schlüssel in der Karte vorhanden ist oder nicht, und liefert das Ergebnis zu True oder False.

Beispiel

$ color: ("schwarz": #000000, "lila": #6a0dad)
MAP-HAS-TEY ($ Color, "Yellow")

Ausgang

FALSCH

Map-Keys (MAP) -Funktion

Diese Funktion holt alle Schlüssel in einer Karte ab.

Beispiel

$ color: ("schwarz": #000000, "lila": #6a0dad)
Map-Keys ($ color)

Ausgang

"Schwarz", "lila"

MAP-Merge (MAP1, MAP2) -Funktion

Um MAP2 am Ende von MAP1 anzuhängen, wird diese Funktion verwendet.

Beispiel

$ color: ("schwarz": #000000, "lila": #6a0dad)
$ color1: („Pink“: #FFC0CB, „Brown“: #964b00)
Karte-Merge ($ color, $ color1)

Ausgang

schwarz ”: #000000," lila ": #6a0dad," pink ": #ffc0cb," braun ": #964b00

MAP-Remove (Karte, Schlüssel…) Funktion

Diese Funktion beseitigt alle angegebenen Schlüssel aus der Karte.

Beispiel

$ color: ("pink":#ffc0cb, "braun":#964b00, "schwarz":#000000)
Map-Remove ($ color, "braun")

Ausgang

"Pink":#ffc0cb, "schwarz":#000000

MAP-VALUES (MAP) -Funktion

Diese Funktion holt alle in der Karte vorhandenen Werte ab.

Beispiel

$ color: ("pink":#ffc0cb, "braun":#964b00, "schwarz":#000000)
Kartenwerte ($ color)

Ausgang

#FFC0CB, #964B00, #000000

Abschluss

SASS -Listenfunktionen werden verwendet, um Listen wie Evaluieren von Listenwerten, Verbindungslisten oder Einfügen von Elementen in eine Liste zu manipulieren. In der Zwischenzeit bestehen Karten in SASS aus mehreren Schlüsselwertpaaren, die mit Kartenfunktionen bewertet werden können. Beide Listen und Karten sind starr und weisen keine Änderung auf. Daher verändert jede Funktion, die eine neue Liste oder Karte abholt. Alle Funktionen, die mit Listen und Karten in SASS verbunden sind, werden in diesem Artikel zusammen mit Beispielen erläutert.