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 module sass: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ément blue 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 par yellow.

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.
  • É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.

YouTube Video