@extend-Direktive

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:

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

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