CSS Academy · Lektion

Variablen, Verschachtelung und Partials

Verwenden Sie Sass-Variablen für wiederverwendbare Werte, verschachteln Sie Selektoren für bessere Lesbarkeit und teilen Sie den Code in Partials auf.

Variablen, Verschachtelung und Partials ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Was ist Sass?

Sass (Syntactically Awesome Stylesheets) ist ein CSS-Präprozessor, der CSS um Variablen, Verschachtelungen, Mixins, Funktionen und weitere Elemente erweitert. Sass-Dateien werden in standardmäßiges CSS kompiliert.

Zwei Sass-Syntaxen

Sass bietet zwei Dateiformate:

.scss – CSS-kompatible Superset-Syntax (am weitesten verbreitet)
.sass – einrückungsbasierte Syntax (ohne geschweifte Klammern oder Semikolons)

Dieser Kurs behandelt SCSS.

Sass-Variablen

Sass-Variablen verwenden das Präfix $. Sie werden zur Kompilierungszeit aufgelöst – anders als benutzerdefinierte CSS-Eigenschaften sind sie im Browser nicht dynamisch.

<button class="button">Sass Variables</button>

Sass-Variablen im Vergleich zu benutzerdefinierten CSS-Eigenschaften

Die wichtigsten Unterschiede:

Sass-Variablen: zur Kompilierungszeit verarbeitet, nicht im Browser vorhanden, können zur Laufzeit nicht geändert werden
Benutzerdefinierte CSS-Eigenschaften: im Browser dynamisch, können durch JS geändert werden und berücksichtigen die Kaskade

Moderne Praxis: Verwenden Sie beide. Sass-Variablen eignen sich für Logik zur Build-Zeit, benutzerdefinierte CSS-Eigenschaften für Theming zur Laufzeit.

Verschachtelung

Sass ermöglicht es, Selektoren ineinander zu verschachteln und dadurch die HTML-Struktur abzubilden. Die kompilierte Ausgabe verwendet Nachfahren-Selektoren.

<div class="card">
    <div class="card-title">Card title</div>
    <div class="card-body">Card body text</div>
  </div>

&-Elternselektor

& verweist auf den übergeordneten Selektor und ermöglicht BEM-ähnliche Muster sowie Zustandsselektoren:

<button class="button">Button</button>
  <button class="button active">Active state (font-weight: bold)</button>
  <button class="button--primary">BEM modifier: button--primary</button>
  <span class="button__icon">&#128279;</span> BEM element: button__icon

Warnung zur Verschachtelungstiefe

Vermeiden Sie eine Verschachtelung von mehr als drei Ebenen. Tiefe Verschachtelungen erzeugen übermäßig spezifische Selektoren und machen das CSS anfällig. Wenn Sie feststellen, dass Sie tief verschachteln, muss die CSS-Architektur wahrscheinlich refaktoriert werden.

Sass-Partials

Ein Partial ist eine Sass-Datei, deren Name mit einem Unterstrich beginnt (_card.scss). Partials werden nicht eigenständig kompiliert, sondern müssen in eine andere Datei importiert werden. Dadurch wird verhindert, dass unerwünschte CSS-Ausgabedateien erzeugt werden.

@use für Importe

Modernes Sass verwendet @use, um Partials zu importieren. Es stellt Namespaces bereit, um Variablenkonflikte zu vermeiden:

<h2 class="heading">Namespaced heading (t.$primary-color)</h2>

@forward für Bibliotheken

@forward exportiert die Member eines Moduls erneut, sodass sie von Dateien verwendet werden können, die Ihre Bibliothek importieren:

<span class="badge">Forwarded token (lib.$primary-color)</span>

Veraltetes @import

Die ältere @import-Direktive ist in Dart Sass veraltet. Migrieren Sie zu @use und @forward, um eine bessere Namespace-Verwaltung und Performance zu erreichen.

Kurze Überprüfung

Welchen CSS-Selektor erzeugt Sass aus der Verschachtelung von .nav { .link { color: white; } }?

Zusammenfassung

Sass-Variablen ($name) werden zur Kompilierungszeit aufgelöst. Verschachtelungen bilden die HTML-Struktur ab, sollten aber nicht tiefer als drei Ebenen reichen. & verweist auf den übergeordneten Selektor und wird für Pseudoklassen, Zustände und BEM-Modifikatoren verwendet. Partials (_file.scss) werden importiert, nicht direkt kompiliert. Verwenden Sie für das Laden moderner Sass-Module @use (nicht @import).

Häufig gestellte Fragen

Ist die Lektion „Variablen, Verschachtelung und Partials“ kostenlos?

Ja — der vollständige Text von „Variablen, Verschachtelung und Partials“ 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 „Variablen, Verschachtelung und Partials“?

Verwenden Sie Sass-Variablen für wiederverwendbare Werte, verschachteln Sie Selektoren für bessere Lesbarkeit und teilen Sie den Code in Partials auf. 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 1 von 4.

Wie lange dauert die Lektion „Variablen, Verschachtelung und Partials“?

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