Listes en SASS
Cet article explique les listes en SASS.
Nous couvrirons les bases et les utilisations avancées des listes en SASS et fournirons des exemples pratiques.
YouTube Video
Listes en SASS
SASS propose des fonctionnalités utiles, similaires à la programmation, en tant qu’extension de CSS. Parmi celles-ci, les listes sont une fonctionnalité très utile lors de la définition dynamique des styles.
Qu’est-ce qu’une liste SASS ?
Une liste SASS est un ensemble de valeurs séparées par des virgules (,
) ou des espaces. Elles sont utilisées pour passer plusieurs valeurs à des propriétés CSS ou effectuer des itérations.
1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;
Les principales caractéristiques des listes comprennent les points suivants :.
- Une liste peut contenir des valeurs de tout type de donnée, comme des nombres, des chaînes de caractères ou des couleurs.
- Vous pouvez choisir entre des listes séparées par des virgules ou par des espaces selon le cas d’utilisation.
Exemple de base de définition de style utilisant les listes
Voici un exemple de génération dynamique de styles de bordure simples à l’aide de listes.
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}
Résultat de la compilation
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}
- Avec la fonction
nth()
du modulesass:list
, vous pouvez récupérer une valeur spécifique d'une liste.
Manipulation de listes
Le module
sass:list fournit des fonctions pour manipuler les listes, ce qui facilite la récupération et l’ajout d’éléments.
.
Récupérer un élément : nth()
nth()
est une fonction qui récupère un élément d’une liste.
1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red
- Dans ce code, la fonction
nth()
est utilisée pour obtenir la valeur à l’index spécifié.
Vérifier l’indice : index()
index()
est une fonction qui renvoie la position d’un élément dans une liste.
1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3
- Dans ce code,
index()
est utilisé pour obtenir que l’élémentblue
est le troisième élément de la liste.
Obtenir la longueur de la liste : length()
length()
est une fonction qui retourne la longueur d’une liste.
1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3
- Dans ce code, la fonction
length()
est utilisée pour obtenir le nombre de valeurs dans la liste.
Ajouter un élément : append()
append()
est une fonction utilisée pour ajouter des éléments à une liste.
1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle
- Dans ce code, la fonction
append()
est utilisée pour ajouter une valeur à la liste.
Remplacer un élément : set-nth()
set-nth()
est une fonction qui remplace l’élément à une position spécifiée par une autre valeur.
1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue
- Dans ce code,
set-nth()
est utilisé pour remplacer le deuxième élément paryellow
.
Combiner des listes : join()
join()
est une fonction qui combine deux listes.
1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d
- Dans ce code,
join()
est utilisé pour combiner deux listes en une seule.
Associer des listes par paire : zip()
zip()
est une fonction qui regroupe plusieurs listes élément par élément.
1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)
- Dans ce code,
zip()
est utilisé pour associer les noms et les âges par paire.
Listes imbriquées
Les listes peuvent également être imbriquées, permettant de les utiliser comme des tableaux à deux dimensions.
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
- En manipulant de telles structures de données complexes, la génération avancée de styles devient possible.
Exemple pratique : Génération de dégradés
Voici un exemple de génération efficace de dégradés à l’aide de listes.
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}
Résultat de la compilation
1.background {
2 background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}
-
Ce code est un exemple de génération automatique de dégradés à l’aide de listes en SCSS.
- Les couleurs utilisées pour le dégradé sont définies dans la liste
$colors
. - Dans la fonction
gradient()
, une position est calculée et attribuée de manière égale à chaque couleur en fonction du nombre de couleurs, créant ainsi une liste pour le dégradé. - Dans la classe
.background
,linear-gradient
est utilisé pour combiner la liste de couleurs générée et appliquer un dégradé horizontal.
- Les couleurs utilisées pour le dégradé sont définies dans la liste
-
Étant donné que les positions sont automatiquement calculées selon la longueur de la liste de couleurs, vous pouvez facilement créer un dégradé homogène en ajoutant ou en modifiant des couleurs.
Précautions et bonnes pratiques
Les points suivants peuvent être pris en compte lors de l’utilisation des listes :.
-
Type de séparateur de liste Les listes séparées par des virgules et celles séparées par des espaces sont traitées différemment ; il faut donc choisir en fonction de la situation.
-
Taille de la liste Lorsqu’on manipule dynamiquement des listes, il est recommandé de vérifier la taille avec la fonction
length()
. -
Gestion des listes imbriquées Quand on gère des listes imbriquées, une manipulation attentive des index peut aider à éviter les erreurs.
Conclusion
Les listes SASS sont un outil puissant pour définir dynamiquement des styles et gérer efficacement des conceptions complexes.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.