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

Schauen wir uns nun das Bild unten an, das zwei Schaltflächenelemente zeigt:

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

Der HTML-Code ist:

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

Sehen wir uns an, wie wir mit Hilfe von Sass Stile erben 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 .submit-button-Selektor erbt alle Stile vom .send-button-Selektor mithilfe der @extend-Direktive.