Content Blocks (@content)

Définition

Mécanisme qui permet a un mixin de recevoir un bloc de CSS via @content. Le bloc est injecte a l'endroit ou @content est appelé dans le mixin.

Analogie

Un gabarit avec un trou : tu remplis le trou avec le contenu que tu veux a chaque utilisation.

Exemple de code

@mixin on-hover {
  &:hover, &:focus-visible {
    @content;
  }
}

.button {
  background: blue;
  @include on-hover {
    background: darkblue;
    transform: scale(1.05);
  }
}

Cas d'usage

Créer des mixins de contexte (média queries, pseudo-sélecteurs) qui encapsulent un pattern.

Termes liés