Erweitern von Styles mit der @extend-Direktive
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.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you explain how the @extend directive works in more detail?
Are there any limitations or drawbacks to using @extend in Sass?
Can you show an example of how to override other properties besides background-color?
Awesome!
Completion rate improved to 2.04Erweitern von Styles mit der @extend-Direktive
Swipe um das Menü anzuzeigen
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.
Danke für Ihr Feedback!
