@extend - le chaînage d'héritage

Il est possible de chaîner les héritages.

Exemple SCSS :

.error {
  background-color: #fdd;
  border: 1px #f00;
}

.seriousError {
  @extend .error;
  border-width: 3px;
}

.criticalError {
  @extend .seriousError;
  bottom: 10%;
  left: 10%;
  position: fixed;
  right: 10%;
  top: 10%;
}

Résultat CSS après compilation :

.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError, .criticalError {
  border-width: 3px;
}

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}