Placeholders (%placeholder)

Définition

Sélecteurs virtuels préfixes par % qui ne sont compilés que s'ils sont étendus via @extend. Évitent de générer du CSS inutile contrairement aux classes classiques.

Analogie

Un plan d'architecte : il n'existe pas physiquement, mais tout bâtiment qui l'utilise hérité de sa structure.

Exemple de code

%flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero { @extend %flex-center; height: 100vh; }
.modal { @extend %flex-center; }

Cas d'usage

Partager des styles communs entre sélecteurs sans générer de classe CSS inutilisée.

Anti-pattern

Termes liés