Une boucle écrit à ta place des dizaines de règles

Sass est un vrai langage : il a des listes, des boucles, des fonctions et des conditions. Tu les connais déjà d'un autre langage, seule la syntaxe change. Chaque exemple est modifiable : change le code et regarde le CSS généré à droite.

1. Une boucle sur une map avec @each

Une map est un dictionnaire : des paires clé: valeur entre parenthèses, séparées par des virgules. @each $nom, $couleur in $couleurs lit une paire à chaque tour : au premier tour $nom vaut 'primary', au deuxième 'danger', et ainsi de suite.

Pour fabriquer un nom de classe à partir d'une variable, on utilise l'interpolation #{$nom}. Sans elle, Sass écrirait littéralement .btn-$nom.

À toi : ajoute 'warning': #e67e22, dans la map. Une règle .btn-warning apparaît sans que tu écrives autre chose. Oublie la virgule entre deux paires : Sass signale l'erreur.

2. Une suite de nombres avec @for

@for $i from 1 through 5 répète le bloc cinq fois, avec $i qui vaut 1, puis 2, jusqu'à 5. Ici on fabrique une échelle d'espacements : .mt-1 vaut 8 px, .mt-2 vaut 16 px, etc.

À toi : remplace through par to. .mt-5 disparaît : through inclut la dernière valeur, to l'exclut. C'est la source d'erreur la plus courante avec cette boucle.

3. Une grille de 12 colonnes avec math.div

Pour diviser, Sass demande math.div($i, 12) au lieu de $i / 12. Le caractère / existe déjà en CSS avec un autre sens (font: 12px/1.5), et Sass a abandonné son ancien usage pour la division. La ligne @use 'sass:math' en haut du fichier charge les fonctions de calcul.

On obtient une fraction entre 0 et 1, qu'on multiplie par 100% : .col-3 vaut 25 %, .col-7 vaut 58,33 %.

À toi : remplace les deux 12 par 6 pour obtenir une grille de 6 colonnes. Vérifie que .col-6 fait bien 100 %.

4. Une fonction avec @function

Une fonction calcule une valeur et la renvoie avec @return. Tu l'utilises à la place d'une valeur, par exemple font-size: rem(32). Un mixin, lui, produit des déclarations CSS entières : c'est la différence entre les deux.

Ici rem(32) convertit des pixels en rem (32 divisé par 16 donne 2rem). Le paramètre $base: 16 a une valeur par défaut, comme dans n'importe quel langage.

À toi : écris rem(20, 10) à la place de rem(32). Tu changes la base de conversion pour cet appel seulement.

5. Une décision avec @if et @else

Même idée qu'un if en PHP ou en JavaScript. On compare avec ==, et la suite s'écrit @else if (deux mots) puis @else. Ici le mixin alerte choisit les couleurs selon le niveau reçu.

À toi : ajoute .alerte-test { @include alerte('warning'); }. Aucun if ne correspond à 'warning', donc c'est le @else qui s'applique : les couleurs de l'info.

6. Un bloc passé à un mixin avec @content

Un mixin peut recevoir un bloc de code de la part de celui qui l'appelle. À l'endroit où le mixin écrit @content, Sass colle ce bloc. Ici le mixin sous enveloppe le bloc dans la bonne media query : le point de rupture est écrit à un seul endroit, dans la map.

map.get($points, $nom) lit une valeur dans la map à partir de sa clé.

À toi : dans .sidebar, ajoute @include sous('mobile') { width: 90%; }. Une deuxième media query apparaît, avec le point de rupture de 480 px.

7. Une map dans une map

Une valeur de map peut elle-même être une map. Ici chaque thème contient un fond et un texte. La boucle lit d'abord le nom du thème, puis map.get($t, 'fond') va chercher le détail. Ajouter un thème revient à ajouter une ligne dans la map.

À toi : ajoute un thème 'contraste': ('fond': #000000, 'texte': #ffff00). La classe .theme-contraste apparaît toute seule.

Quel outil pour quel besoin

Le garde-fou

Une boucle cache le CSS qu'elle produit : quelques lignes de Sass peuvent en générer des centaines, que le navigateur devra tout de même télécharger. Compile et regarde le résultat à chaque fois. Si tu n'as que deux ou trois éléments, deux appels de mixin sont plus lisibles qu'une boucle. Réserve les boucles aux listes qui sont vraiment répétitives et qui vont grandir.