La quatrième fonctionnalité utile nous 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.

Maintenant, regardons l'image ci-dessous, qui montre deux éléments de bouton :

Nous avons deux boutons : "envoyer" et "soumettre". La seule distinction entre ces éléments est la valeur de la propriété background-color. Par conséquent, nous pouvons définir les styles pour le bouton "envoyer" et faire en sorte que le bouton "soumettre" 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 avec 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.