CSS Academy · Lektion

Extend- und Platzhalter-Selektoren

Teilen Sie Stile mit @extend und unsichtbaren Platzhalter-Selektoren zwischen Selektoren.

Extend- und Platzhalter-Selektoren ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

@extend in Sass

Mit @extend kann ein Selektor alle Stile eines anderen Selektors übernehmen. Statt Code zu duplizieren, erzeugt das Erweitern ein gemeinsames Regelwerk im kompilierten CSS.

<div class="error">Error message</div>
  <div class="critical-error">Critical error message</div>

Platzhalterselektoren

Ein Platzhalterselektor (mit dem Präfix %) definiert einen Stilblock, der nicht eigenständig kompiliert wird, sondern nur beim Erweitern. Er erzeugt kein CSS, solange ihn nichts erweitert.

<div class="product-card">Product card</div>
  <div class="profile-card">Profile card</div>

Warum Platzhalter statt Klassen?

Beim Erweitern einer echten Klasse wird deren gesamter Selektorkontext in die kompilierte Ausgabe übernommen. Platzhalter sind sauberer: Sie geben nur für die erweiternden Selektoren gruppierte Selektoren aus.

Kompilierte Ausgabe von @extend

Wenn mehrere Selektoren denselben Platzhalter erweitern, gruppiert Sass sie in einer durch Kommas getrennten Regel:

<div class="product-card">Product card</div>
  <div class="profile-card">Profile card</div>

Fallstricke bei @extend

@extend hat einige erhebliche Einschränkungen:

Kann nicht innerhalb von Media Queries verwendet werden
Kann bei Ketten von Erweiterungen unerwartete, umfangreiche gruppierte Selektoren erzeugen
Macht es schwieriger, das kompilierte CSS auf die Quelldateien zurückzuführen

@extend im Vergleich zu Mixin: Abwägungen

Vergleich:

@extend: kleineres CSS (gemeinsame Regeln), aber komplexe Selektorketten und Einschränkungen bei Media Queries
@mixin: dupliziert Deklarationen, ist aber besser vorhersehbar und kann innerhalb von Media Queries verwendet werden

Das Mixin ist meistens die bessere Wahl

In der modernen Sass-Praxis werden Mixins im Allgemeinen gegenüber @extend bevorzugt. HTTP/2 und die Gzip-Komprimierung machen die Duplizierung von Deklarationen weniger relevant, während die bessere Debugbarkeit von Mixins den geringfügigen Unterschied bei der CSS-Größe aufwiegt.

Wann @extend sinnvoll ist

@extend (mit Platzhaltern) eignet sich, wenn:

Mehrere Selektoren tatsächlich denselben semantischen Zustand teilen (z. B. Fehlerzustände)
Sie sich nicht innerhalb einer Media Query befinden
Die Basisstile stabil und klar definiert sind

Platzhalter und Theming

Platzhalter eignen sich gut für resetähnliche Utility-Sammlungen, die von mehreren Komponenten übernommen werden:

<a href="#" class="skip-link">Skip to content</a>
  <span class="sr-label">Screen reader label</span>

Überlegungen zur Veraltung

Einige Styleguides und Teams verbieten @extend vollständig, da die Funktion komplex ist und eine Aufblähung der Selektoren verursachen kann. Machen Sie sich mit den Abwägungen vertraut und befolgen Sie die Konventionen Ihres Teams.

Kurze Überprüfung

Was ist der Unterschied zwischen dem Erweitern einer gewöhnlichen Klasse und dem Erweitern eines Platzhalterselektors (%)?

Zusammenfassung

Mit @extend kann ein Selektor die Stile eines anderen übernehmen, wobei Selektoren im kompilierten CSS gruppiert werden. Platzhalter (%name) werden erst beim Erweitern kompiliert und erzeugen ansonsten keine Ausgabe – dadurch sind sie sauberer als das Erweitern echter Klassen. Vermeiden Sie @extend innerhalb von Media Queries. In modernem Sass werden Mixins wegen ihrer besseren Vorhersehbarkeit und Debugbarkeit im Allgemeinen gegenüber @extend bevorzugt.

Häufig gestellte Fragen

Ist die Lektion „Extend- und Platzhalter-Selektoren“ kostenlos?

Ja — der vollständige Text von „Extend- und Platzhalter-Selektoren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Extend- und Platzhalter-Selektoren“?

Teilen Sie Stile mit @extend und unsichtbaren Platzhalter-Selektoren zwischen Selektoren. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Extend- und Platzhalter-Selektoren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy