Chapitre 10 – Boucles en SCSS

Pourquoi générer du CSS avec des boucles ?

Dans un projet, tu as souvent besoin de variantes : marges de 0 à 40px, colonnes de 1 à 12, tailles de texte, etc. Écrire tout à la main est long, source d'erreurs, et difficile à faire évoluer.

• Tu gagnes du temps : une boucle remplace des dizaines de lignes manuelles.
• Tu imposes une cohérence : toutes les valeurs suivent le même calcul.
• Tu réduis les erreurs : pas d'oubli ou d'incohérence entre les valeurs.

Les 3 boucles principales de SCSS

• @for : itération sur une plage de nombres (idéal pour les séquences numériques).
• @each : itération sur une liste ou une map (idéal pour les valeurs nommées).
• @while : boucle conditionnelle (plus rare en SCSS, à utiliser avec parcimonie).

@for : générer des classes numérotées

Exemple : générer des classes de marge verticale .mt-1 à .mt-5.

SCSS :

@for $i from 1 through 5 {
  .mt-#{$i} {
    margin-top: 8px * $i;
  }
}

CSS généré :

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 40px; }

@for : to vs through

Il y a deux syntaxes pour @for selon que tu veux inclure ou exclure la dernière valeur :

// 1, 2, 3, 4 (5 exclu)
@for $i from 1 to 5 {
  .item-#{$i} { /* ... */ }
}

// 1, 2, 3, 4, 5 (5 inclus)
@for $i from 1 through 5 {
  .item-#{$i} { /* ... */ }
}

@each : parcourir une liste

Exemple : générer des classes de couleurs pour des badges.

SCSS :

$colors: primary, success, warning, danger;

@each $name in $colors {
  .badge--#{$name} {
    font-weight: 700;
  }
}

CSS généré :

.badge--primary { font-weight: 700; }
.badge--success { font-weight: 700; }
.badge--warning { font-weight: 700; }
.badge--danger { font-weight: 700; }

Ici, tu parcours une liste de mots. On verra au chapitre 12 comment associer ces noms à des couleurs réelles avec les maps.

@while : boucle conditionnelle (à utiliser rarement)

@while continue tant qu'une condition est vraie. C'est puissant, mais moins lisible que @for dans 90 % des cas.

SCSS :

$i: 1;

@while $i <= 3 {
  .p-#{$i} {
    padding: 8px * $i;
  }

  $i: $i + 1;
}

CSS généré :

.p-1 { padding: 8px; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }

Cas pro 1 : système d'espacements cohérent

On veut un petit "système" d'espacements (margin et padding) basé sur une unité (ici 8px). Plutôt que de tout écrire à la main, on génère des utilitaires.

SCSS :

$space-unit: 8px;
$space-levels: 0, 1, 2, 3, 4, 5;

@each $i in $space-levels {
  .m-#{$i}  { margin:        $space-unit * $i; }
  .mt-#{$i} { margin-top:    $space-unit * $i; }
  .mb-#{$i} { margin-bottom: $space-unit * $i; }

  .p-#{$i}  { padding:       $space-unit * $i; }
  .pt-#{$i} { padding-top:   $space-unit * $i; }
  .pb-#{$i} { padding-bottom:$space-unit * $i; }
}

CSS généré (extrait) :

.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.p-0 { padding: 0; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }

.m-1 { margin: 8px; }
.mt-1 { margin-top: 8px; }
.mb-1 { margin-bottom: 8px; }
.p-1 { padding: 8px; }
.pt-1 { padding-top: 8px; }
.pb-1 { padding-bottom: 8px; }

/* ... jusqu'à 5 */

Cas pro 2 : grilles 12 colonnes (classes "span")

Exemple : générer des classes .col-1 à .col-12 pour un système de grille simple.

SCSS :

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

@for $i from 1 through 12 {
  .col-#{$i} {
    grid-column: span $i;
  }
}

CSS généré (extrait) :

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

Cas pro 3 : variantes de composants (taille S/M/L)

Tu peux générer plusieurs tailles de composant à partir d'une liste, en combinant boucle et conditions.

SCSS :

$sizes: sm, md, lg;

@each $size in $sizes {
  .btn--#{$size} {
    @if $size == sm {
      padding: 6px 10px;
      font-size: 14px;
    } @else if $size == md {
      padding: 10px 16px;
      font-size: 16px;
    } @else if $size == lg {
      padding: 14px 20px;
      font-size: 18px;
    }
  }
}

CSS généré :

.btn--sm {
  padding: 6px 10px;
  font-size: 14px;
}

.btn--md {
  padding: 10px 16px;
  font-size: 16px;
}

.btn--lg {
  padding: 14px 20px;
  font-size: 18px;
}

Ici, on mélange boucle + conditions. Les conditions seront approfondies au chapitre 11.

Guide des bonnes pratiques pour les boucles SCSS

• Générer uniquement ce dont tu as besoin : contrôler la taille du CSS final.
• Préférer @for si tu génères une suite numérique (1, 2, 3...).
• Préférer @each si tu travailles avec une liste de valeurs nommées.
• Éviter @while dans la plupart des cas (moins lisible).
• Documenter les classes générées : surtout si elles sont "utilitaires".
• Garder une logique simple : lisibilité avant "magie" complexe.

Erreur 1 : générer trop de classes

Plus tu génères, plus ton CSS grossit. Un CSS trop gros ralentit le chargement et complique le débogage. Fixe des bornes raisonnables (ex: 0-8 pour les espacements, pas 0-50).

Erreur 2 : boucles illisibles

Une boucle avec beaucoup de logique imbriquée, de conditions complexes et de calculs devient vite incompréhensible. Dans ce cas, découpe en fonctions/mixins, ou simplifie la logique.

Erreur 3 : oublier le CSS final

Ce que tu livres au navigateur, c'est du CSS. Il faut pouvoir le lire et le comprendre quand tu débogues un problème. Vérifie toujours le CSS généré pour t'assurer qu'il correspond à tes attentes.