Die vierte hilfreiche Funktion ermöglicht es, vordefinierte CSS-Eigenschaften von einem Element auf ein anderes anzuwenden und so eine Beziehung zwischen Selektoren herzustellen. Das bedeutet, dass ein Selektor die Eigenschaften eines anderen Selektors erben kann.

Sehen wir uns nun das folgende Bild an, das zwei Button-Elemente zeigt:

Wir haben zwei Buttons: "send" und "submit". Der einzige Unterschied zwischen diesen Elementen ist der Wert der Eigenschaft background-color. Daher können wir die Stile für den "send"-Button definieren und den "submit"-Button diese Stile erben lassen.

Der HTML-Code lautet:

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

Sehen wir uns an, wie wir mit Hilfe von Sass Stile vererben können.

.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;
}

Der Selektor .submit-button erbt mit der Direktive .send-button alle Stile vom Selektor @extend.