La quatrième fonctionnalité utile permet d'appliquer des propriétés CSS prédéfinies d'un élément à un autre, créant ainsi une relation entre les sélecteurs. Cela signifie qu'un sélecteur peut hériter des propriétés d'un autre sélecteur.

Observons maintenant l'image ci-dessous, qui présente deux éléments de bouton :

Nous avons deux boutons : « send » et « submit ». La seule différence entre ces éléments réside dans la valeur de la propriété background-color. Par conséquent, nous pouvons définir les styles pour le bouton « send » et faire en sorte que le bouton « submit » hérite de ces styles.

Le code html est :

<button class="send-button">send</button>
<button class="submit-button">submit</button>

Voyons comment nous pouvons hériter des styles à l'aide de sass.

.send-button {
  padding: 10px 20px;
  border: 2px solid #4f5e77;
  border-radius: 10px;
  color: white;
  background-color: #ff8a00;
}

.submit-button {
  @extend .send-button;
   background-color: #9bbaee;
}

Le sélecteur .submit-button hérite de tous les styles du sélecteur .send-button en utilisant la directive @extend.