Articles
Introduction à SASS/SCSS
Itération dans SASS

Itération dans SASS

Cet article explique comment gérer l’itération dans SASS.

Nous expliquerons comment effectuer une itération dans SASS étape par étape, en utilisant des exemples de code réels.

YouTube Video

Itération dans SASS

L’itération dans SASS permet d’éviter la duplication de code et vous permet de créer des styles flexibles et réutilisables.

Raisons d’utiliser l’itération dans SASS

Il y a plusieurs avantages à utiliser l’itération, comme par exemple :.

  • La réutilisabilité du code s’améliore, ce qui facilite la génération de styles à motifs similaires.
  • La maintenabilité est renforcée, ce qui permet de modifier facilement les styles en une seule fois.
  • Réduit également les erreurs.

Par exemple, vous pouvez générer en une seule fois des styles pour des boutons de différentes couleurs ou des composants de plusieurs tailles.

Syntaxe utilisée pour l’itération dans SASS

La principale syntaxe utilisée pour l’itération dans SASS est la suivante :.

  • En utilisant @for, vous pouvez effectuer une itération sur une plage de nombres spécifiée.
  • En utilisant @each, vous pouvez parcourir des listes ou des maps dans votre itération.
  • En utilisant @while, vous pouvez effectuer une boucle jusqu’à ce qu’une condition soit remplie.

Itération avec @for

@for exécute un traitement répétitif basé sur une plage de nombres spécifiée.

Syntaxe 

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/
  • Indiquez les valeurs de début et de fin pour <start> et <end>. L’utilisation de to exclut la valeur de fin, tandis que through l’inclut.

Exemple

Le code suivant génère automatiquement des classes avec une largeur de bordure augmentant de 1px à chaque fois.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}
  • Ce code génère automatiquement des classes pour des épaisseurs de bordure augmentant de 1px à chaque fois. La directive @for est utilisée ici pour boucler de 1 à 5.

CSS généré 

 1.border-1 {
 2  border-width: 1px;
 3}
 4.border-2 {
 5  border-width: 2px;
 6}
 7.border-3 {
 8  border-width: 3px;
 9}
10.border-4 {
11  border-width: 4px;
12}
13.border-5 {
14  border-width: 5px;
15}
  • Les classes de .border-1 à .border-5 seront générées séquentiellement, chaque bordure augmentant de 1px en épaisseur.

Itération avec @each

@each permet d’effectuer des boucles à partir de listes ou de maps. C’est utile lorsque vous souhaitez générer efficacement des classes à motif.

Syntaxe 

1/*
2@each $item in <list> {
3  ...
4}
5*/

Exemple 1 : Utilisation d’une liste

Le code suivant génère plusieurs classes de couleur de texte.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}
  • Ce code génère automatiquement des classes de couleur de texte pour chaque couleur de la liste. La directive @each est utilisée pour traiter chaque valeur de la liste de manière séquentielle.

CSS généré 

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}
  • Lorsque le fichier SASS est compilé en CSS, des classes comme .text-red, .text-blue et .text-green sont générées pour chaque couleur de la liste.

Exemple 2 : Utilisation d’une map

L’utilisation d’une map vous permet de gérer des paires clé/valeur. Dans l’exemple suivant, les couleurs de fond des boutons sont définies grâce à une map.

 1$colors: (
 2  primary: #3498db,
 3  success: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $hex in $colors {
 8  .bg-#{$name} {
 9    background-color: #{$hex};
10  }
11}

CSS généré 

1.bg-primary {
2  background-color: #3498db;
3}
4.bg-success {
5  background-color: #2ecc71;
6}
7.bg-danger {
8  background-color: #e74c3c;
9}
  • Lorsque le fichier SASS est compilé en CSS, des classes telles que .bg-primary, .bg-success et .bg-danger sont générées pour chaque clé de la map.

Itération avec @while

@while continue la boucle tant que la condition est vraie.

Syntaxe 

1/*
2@while <condition> {
3  ...
4}
5*/

Exemple

Par exemple, si vous souhaitez augmenter la taille de la police étape par étape, vous pouvez écrire :.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}
  • Vous pouvez utiliser la directive @while pour faire un traitement itératif lors de l’augmentation progressive des tailles de police. En utilisant la variable $i, des classes sont automatiquement générées pour les valeurs de 1 à 5.

CSS généré 

 1.font-1 {
 2  font-size: 1rem;
 3}
 4.font-2 {
 5  font-size: 2rem;
 6}
 7.font-3 {
 8  font-size: 3rem;
 9}
10.font-4 {
11  font-size: 4rem;
12}
13.font-5 {
14  font-size: 5rem;
15}
  • Lorsque le fichier SASS est compilé en CSS, des classes dont la taille de police augmente de 1rem à 5rem sont générées automatiquement.

Exemple avancé : Combiner itération et imbrication

La combinaison de l’itération avec la fonctionnalité d’imbrication de SASS permet de générer des styles encore plus avancés.

Exemple

Voici un exemple où les couleurs de fond et de survol des boutons sont définies ensemble.

 1@use "sass:color";
 2
 3$colors: (
 4  primary: #3498db,
 5  success: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9@each $name, $hex in $colors {
10  .btn-#{$name} {
11    background-color: $hex;
12    color: white;
13
14    &:hover {
15      background-color: color.scale($hex, $lightness: -10%);
16    }
17  }
18}
  • En combinant l’itération et l’imbrication SASS, vous pouvez générer d’un seul coup les couleurs de fond des boutons et les couleurs au survol. Pour chaque couleur dans la carte, une classe .btn- est créée et le style :hover est défini grâce à l’imbrication.

CSS généré 

 1.btn-primary {
 2  background-color: #3498db;
 3  color: white;
 4}
 5.btn-primary:hover {
 6  background-color: #2980b9;
 7}
 8.btn-success {
 9  background-color: #2ecc71;
10  color: white;
11}
12.btn-success:hover {
13  background-color: #27ae60;
14}
15.btn-danger {
16  background-color: #e74c3c;
17  color: white;
18}
19.btn-danger:hover {
20  background-color: #c0392b;
21}
  • Lorsque vous convertissez le fichier SASS en CSS, la couleur de fond et la couleur au survol de chaque bouton sont générées automatiquement, et les styles :hover sont définis collectivement à l’aide de l’imbrication.

Points à retenir lors de l’utilisation de l’itération

Gardez les points suivants à l’esprit lorsque vous utilisez l’itération afin d’écrire du code plus efficace et lisible.

  1. Évitez une imbrication trop profonde Une imbrication excessive réduit la lisibilité, il faut donc la limiter au minimum nécessaire.

  2. Tenez compte des impacts sur les performances Si trop de classes sont générées par itération, votre CSS peut devenir inutilement volumineux.

  3. Utilisez des noms de variable appropriés Pour des variables comme $i ou $item, utilisez des noms explicites pour rendre votre code plus compréhensible.

Résumé

L’utilisation de l’itération dans SASS permet une conception de styles efficace et facile à maintenir. En particulier, le choix entre @for, @each et @while permet de générer un CSS dynamique et flexible.

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

La fonction `if` dans SASS