Mixins (@mixin / @include)

Définition

Blocs de styles réutilisables qui acceptent des arguments. Définis avec @mixin, utilises avec @include. Génèrent du CSS a chaque utilisation (contrairement aux placeholders).

Analogie

Une recette paramétrable : même technique de base, mais tu choisis les ingrédients a chaque fois.

Exemple de code

@mixin respond-to($bp) {
  @if $bp == 'md' { @media (min-width: 768px) { @content; } }
  @if $bp == 'lg' { @media (min-width: 1024px) { @content; } }
}

.grid {
  display: block;
  @include respond-to('md') { display: grid; }
}

Cas d'usage

Factoriser des patterns CSS répétitifs comme les média queries, les préfixes vendeur, les animations.

Anti-pattern

Termes liés