@extend

Definition

Directive qui fait heriter un selecteur des styles d'un autre. Le selecteur etendu est ajoute au selecteur source dans le CSS compile (groupement de selecteurs).

Analogie

Copier les genes d'un parent : l'enfant herite de toutes les caracteristiques 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

Eviter la duplication CSS quand plusieurs selecteurs partagent un ensemble commun de styles.

Anti-pattern

Termes lies