@each / @for / @while

Définition

Boucles Sass pour générer du CSS dynamiquement. @each itere sur des listes/maps, @for sur une plage numérique, @while tant qu'une condition est vraie.

Analogie

Des machines qui produisent des variantes en série : même modèle, différentes 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

Générer automatiquement des variantes de composants (couleurs, tailles, états) a partir de maps.

Anti-pattern

Termes liés