Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Erweitern von Styles mit der @extend-Direktive | CSS-Präprozessoren und Sass
Fortgeschrittene CSS-Techniken

bookErweitern 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.

question mark

Was bewirkt das @extend in Sass?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 7. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

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.04

bookErweitern 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.

question mark

Was bewirkt das @extend in Sass?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 7. Kapitel 6
some-alt