Den fjärde användbara funktionen gör det möjligt att tillämpa förinställda CSS-egenskaper från ett element till ett annat, vilket skapar en relation mellan selektorer. Detta innebär att en selektor kan ärva egenskaper från en annan selektor.

Titta nu på bilden nedan, som visar två knappelement:

Vi har två knappar: "send" och "submit." Den enda skillnaden mellan dessa element är värdet på egenskapen background-color. Därför kan vi definiera stilarna för "send"-knappen och låta "submit"-knappen ärva dessa stilar.

HTML-koden är:

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

Låt oss se hur vi kan ärva stilar med hjälp av 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;
}

Selektorn .submit-button ärver alla stilar från selektorn .send-button med hjälp av direktivet @extend.