Content Blocks (@content)

Definition

Mecanisme qui permet a un mixin de recevoir un bloc de CSS via @content. Le bloc est injecte a l'endroit ou @content est appele 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

Creer des mixins de contexte (media queries, pseudo-selecteurs) qui encapsulent un pattern.

Termes lies