Den fjerde nyttige funktion gør det muligt at anvende forudindstillede CSS-egenskaber fra ét element til et andet, hvilket skaber en relation mellem selektorer. Dette betyder, at én selektor kan arve egenskaberne fra en anden selektor.

Lad os nu se på billedet nedenfor, som viser to knap-elementer:

Vi har to knapper: "send" og "submit." Den eneste forskel mellem disse elementer er værdien af background-color-egenskaben. Derfor kan vi definere stilarterne for "send"-knappen og lade "submit"-knappen arve disse stilarter.

HTML-koden er:

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

Lad os se, hvordan vi kan arve stilarter ved hjælp af 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;
}

Selektoren .submit-button arver alle stilarter fra selektoren .send-button ved hjælp af @extend-direktivet.