Dans ce tutoriel, découvrez comment créer un each SASS afin d’automatiser les classes CSS répétitives de votre développement.

Introduction

Lors d’un développement en CSS, il arrive un moment où nous faisons appel à des classes en CSS qui sont répétitives. Pour vous donner un exemple concret, vous serez probablement amenés à faire les réseaux sociaux, les alerts, une liste de technologies, etc.

Développer un each SASS

Pour apprendre comment fonctionne le each SASS, il va nous falloir deux choses : un tableau et une boucle each. Le principe du each SASS repose sur la même base qu’un foreach en PHP. Nous définissons un tableau de valeur dans une variable, qui sera par la suite « boucler » dans un each afin de lister toutes les valeurs du tableau.

Tableau de variables

Tout d’abord, commençons par définir la variable où sera contenu le tableau des valeurs. Dans l’exemple ci-dessous, nous allons prendre des codes couleurs pour des « alerts ».

$alert: (
  info: rgb(5, 180, 216);
  success: rgb(53, 205, 58);
  warning: rgb(255, 165, 52);
  danger: rgb(243, 84, 93);
);

Dans cette variable, nous avons créés un tableau regroupant 4 « name » avec la valeur de chacun. Maintenant que la base est prête, nous passons à la plhase suivante : la boucle « each ».

Boucle « each »

Pour faire une boucle en SASS, nous utilisons la propriété @each à laquelle nous attachons deux variables $key et $val, le tout en localisant la variable $alert. Voici le code de cette boucle. Pour l’exemple, nous partirons sur une class avec une propriété background.

@each $key, $val in $alert {
  .#{$key} {
    background: $val;
  }
}

Afin de mieux comprendre le principe de fonctionnement, passons à une petite illustration.

Comprendre le each SASS en une image

Voici une image qui met en évidence les différents éléments que composent  le each SASS.

Résultat final

Voici le résultat final en CSS de tout ce développement SASS.

.info { 
  background: rgb(5, 180, 216); 
}
.success { 
  background: rgb(53, 205, 58); 
}
.warning { 
  background: rgb(255, 165, 52); 
}
.danger { 
  background: rgb(243, 84, 93); 
}

Conclusion

Vous savez comment créer un each SASS afin de vous faciliter la tâche lors de vos développement SASS. N’hésitez pas à utiliser cette technique lorsque vous devez créer de nombreuses class CSS.