Mixins (@mixin / @include)

Definition

Blocs de styles reutilisables qui acceptent des arguments. Definis avec @mixin, utilises avec @include. Generent du CSS a chaque utilisation (contrairement aux placeholders).

Analogie

Une recette parametrable : meme technique de base, mais tu choisis les ingredients 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 repetitifs comme les media queries, les prefixes vendeur, les animations.

Anti-pattern

Termes lies