Placeholders (%placeholder)

Definition

Selecteurs virtuels prefixes par % qui ne sont compiles que s'ils sont etendus via @extend. Evitent de generer du CSS inutile contrairement aux classes classiques.

Analogie

Un plan d'architecte : il n'existe pas physiquement, mais tout batiment qui l'utilise herite 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 selecteurs sans generer de classe CSS inutilisee.

Anti-pattern

Termes lies