@extend - l'héritage de style

L'héritage permet d'importer les styles d'un sélecteur CSS dans un autre.

Exemple SCSS :

.message {
  border: 1px solid #ddd;
  color: #222;
  padding: 20px;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

Résultat CSS après compilation :

.message, .success, .error {
  border: 1px solid #ddd;
  padding: 20px;
  color: #222;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}