Den fjerde nyttige funksjonen lar oss bruke forhåndsdefinerte CSS-egenskaper fra ett element på et annet, og skaper et forhold mellom selektorer. Dette betyr at én selektor kan arve egenskapene til en annen selektor.

La oss nå se på bildet nedenfor, som viser to knappelementer:

Vi har to knapper: "send" og "submit." Den eneste forskjellen mellom disse elementene er verdien til background-color-egenskapen. Derfor kan vi definere stilene for "send"-knappen og la "submit"-knappen arve disse stilene.

HTML-koden er:

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

La oss se hvordan vi kan arve stiler ved hjelp 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;
}

Selektoren .submit-button arver alle stilene fra selektoren .send-button ved å bruke @extend-direktivet.