Liste et cartographie des fonctions dans SASS | Expliqué

Sass, abréviation de feuille de style syntaxiquement génial, prend en charge l'utilisation de diverses variables, mixins, fonctions, etc. qui, en retour, améliorent la capacité de la langue CSS de base. Si nous parlons de ses fonctions, il existe des fonctions pour les chaînes, les valeurs numériques, les listes, les cartes, etc. Les fonctions qui sont discutées dans cet article sont des fonctions de liste et de carte.

Commençons.

Liste des fonctions dans SASS

Les fonctions de liste SASS sont utilisées pour manipuler des listes telles que l'évaluation des valeurs de liste, de jointure de listes ou d'insérer des éléments dans une liste. Cependant, les listes SASS sont rigides et ne rendent aucun changement, par conséquent, les fonctions de liste qui récupérent une nouvelle liste ne modifient pas l'original.

Comme les chaînes, les listes SASS sont également basées sur 1, ce qui signifie que le premier élément de liste est stocké à l'index 1 plutôt que 0.

Fonction APPEND (liste, valeur, [séparateur])

Cette fonction attache une seule valeur à la fin de la liste. Un séparateur peut rendre des valeurs telles que l'auto (par défaut), la virgule ou l'espace.

Exemple

ajouter ((a, b, c), (d), virgule)

Sortir

A B C D

Si l'espace est utilisé.

Exemple

Ajouter ((a, b, c), (d), espace)

Sortir

A B C D

Fonction Index (liste, valeur)

Cette fonction récupère la position d'index de la valeur spécifiée dans la liste.

Exemple

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

Sortir

c

Fonction IS-Bracket (liste)

Cette fonction évalue si la liste donnée se compose de crochets ou non. Le résultat est sous la forme de vrai ou de faux.

Exemple

IS-Bracket ([1 2 3])

Sortir

vrai

S'il n'y a pas de crochets.

Exemple

IS-Bracket (1 2 3)

Sortir

FAUX

Fonction join (list1, list2, [séparateur, crochet])

Cette fonction attache la deuxième liste fournie à la fin de la première liste donnée. Un séparateur peut rendre des valeurs telles que l'auto (par défaut), la virgule ou l'espace, en attendant, le crochet peut présenter Auto (par défaut), vrai ou fausse valeurs.

Exemple

rejoindre (a b c, d e f)

Sortir

A B C D E F

Lorsqu'un séparateur est utilisé.

Exemple

rejoindre ((a b c), (d e f), virgule)

Sortir

A B C D E F

Quand un crochet est utilisé.

Exemple

rejoindre (A B C, D E F, $ BRACKETED: true)

Sortir

[A B C D E F]

Fonction de longueur (liste)

Dans le but de récupérer la longueur de la liste, cette fonction est utilisée.

Exemple

longueur (a, b, c, d)

Sortir

4

Fonction List-Separator (List)

Cette fonction récupère le séparateur utilisé dans la liste comme une chaîne.

Exemple

Liste-séparateur ((A B C))

Sortir

"espace"

Nième (Liste, N) Fonction

Afin de récupérer l'élément nième spécifié dans la liste, cette fonction est utilisée.

Exemple

nth (a, b, c, 4)

Sortir

4

fonction set-nth (liste, n, valeur)

Cette fonction donne la valeur spécifiée au nème numéro de la liste.

Exemple

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

Sortir

A b y

Fonction zip (listes)

Cette fonction rejoint toutes les listes définies en une seule liste multidimensionnelle.

Exemple

zip (3px 4px 5px, pointillé pointillé en pointillé, noir jaune violet)

Sortir

3px en pointillé violet, jaune massif 4px, noir en pointillé 5px

Maintenant que nous avons appris les fonctions de liste, nous allons maintenant passer à notre prochain sujet de discussion.

Fonctions de cartographie dans SASS

Les cartes dans SASS se composent de plusieurs paires de valeurs de clé qui peuvent être évaluées à l'aide de fonctions MAP. De plus, vous pouvez également utiliser des fonctions de liste pour examiner les cartes dans SASS, cependant, ce que les cartes seront considérées comme des listes avec deux éléments.

Tout comme les listes, les cartes dans Sass sont rigides et ne présentent aucun changement; Par conséquent, les fonctions de carte qui récupérent une nouvelle carte ne modifient pas celle d'origine.

Fonction Map-get (carte, clé)

Cette fonction récupère la valeur liée à la clé définie dans la carte.

Exemple

$ Color: («Black»: # 000000, «Purple»: # 6A0DAD)
map-get ($ couleur, «violet»)

Sortir

# 6A0DAD

Fonction Map-Has-Key (carte, clé)

Cette fonction évalue si la clé définie est présente dans la carte ou non et fournit le résultat en vrai ou faux.

Exemple

$ Color: («Black»: # 000000, «Purple»: # 6A0DAD)
Map-has-key ($ couleur, "jaune")

Sortir

FAUX

Fonction Map-Keys (carte)

Cette fonction récupère toutes les touches d'une carte.

Exemple

$ Color: («Black»: # 000000, «Purple»: # 6A0DAD)
Map-keys ($ couleur)

Sortir

«Noir», «violet»

Fonction Map-Merge (MAP1, MAP2)

Afin de joindre MAP2 à la fin de MAP1, cette fonction est utilisée.

Exemple

$ Color: («Black»: # 000000, «Purple»: # 6A0DAD)
$ Color1: («Pink»: # FFC0CB, «Brown»: # 964B00)
Map-Merge ($ Color, $ Color1)

Sortir

Black ”: # 000000,« Purple »: # 6A0DAD,« Pink »: # FFC0CB,« Brown »: # 964B00

Fonction Map-Remove (carte, touches…)

Cette fonction élimine toutes les clés déclarées de la carte.

Exemple

$ couleur: («rose»: # ffc0cb, «marron»: # 964b00, «noir»: # 000000)
Map-Remove ($ Color, «Brown»)

Sortir

«Pink»: # FFC0CB, «Black»: # 000000

Fonction des valeurs de carte (carte)

Cette fonction récupère toutes les valeurs présentes dans la carte.

Exemple

$ couleur: («rose»: # ffc0cb, «marron»: # 964b00, «noir»: # 000000)
Map-Values ​​($ Color)

Sortir

# FFC0CB, # 964B00, # 000000

Conclusion

Les fonctions de liste SASS sont utilisées pour manipuler des listes telles que l'évaluation des valeurs de liste, de jointure de listes ou d'insérer des éléments dans une liste. Pendant ce temps, les cartes dans SASS se composent de plusieurs paires de valeurs de clé qui peuvent être évaluées à l'aide de fonctions MAP. Les listes et les cartes sont rigides et ne présentent aucun changement; Par conséquent, toute fonction qui récupère une nouvelle liste ou une nouvelle carte ne modifie pas celle d'origine. Toutes les fonctions associées aux listes et cartes dans SASS sont expliquées dans cet article ainsi que des exemples.