De vierde nuttige functie stelt ons in staat om vooraf ingestelde CSS-eigenschappen van het ene element op een ander element toe te passen, waardoor er een relatie tussen selectors ontstaat. Dit betekent dat de ene selector de eigenschappen van een andere selector kan overnemen.

Bekijk nu de onderstaande afbeelding, waarop twee knop-elementen worden weergegeven:

We hebben twee knoppen: "send" en "submit." Het enige verschil tussen deze elementen is de waarde van de eigenschap background-color. Daarom kunnen we de stijlen voor de "send"-knop definiëren en de "submit"-knop deze stijlen laten overnemen.

De html-code is:

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

Laten we bekijken hoe we stijlen kunnen overnemen met behulp van 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;
}

De .submit-button selector neemt alle stijlen van de .send-button selector over met behulp van de @extend directive.