@each / @for / @while

Definition

Boucles Sass pour generer du CSS dynamiquement. @each itere sur des listes/maps, @for sur une plage numerique, @while tant qu'une condition est vraie.

Analogie

Des machines qui produisent des variantes en serie : meme modele, differentes couleurs/tailles.

Exemple de code

$colors: (primary: #3498db, danger: #e74c3c);

@each $name, $color in $colors {
  .btn-#{$name} {
    background: $color;
    &:hover { background: darken($color, 10%); }
  }
}

Cas d'usage

Generer automatiquement des variantes de composants (couleurs, tailles, etats) a partir de maps.

Anti-pattern

Termes lies