@extend

Définition

Directive qui fait hériter un sélecteur des styles d'un autre. Le sélecteur étendu est ajoute au sélecteur source dans le CSS compile (groupement de sélecteurs).

Analogie

Copier les gènes d'un parent : l'enfant hérité de toutes les caractéristiques sans duplication.

Exemple de code

.message {
  padding: 1rem;
  border: 1px solid;
  border-radius: 4px;
}
.success { @extend .message; border-color: green; }
.error { @extend .message; border-color: red; }
// CSS: .message, .success, .error { padding... }

Cas d'usage

Éviter la duplication CSS quand plusieurs sélecteurs partagent un ensemble commun de styles.

Anti-pattern

Termes liés