Benutzerdefinierte Eigenschaften deklarieren und verwenden
Definieren Sie CSS Custom Properties mit dem Präfix -- und verwenden Sie sie mit der Funktion var().
Benutzerdefinierte Eigenschaften deklarieren und verwenden 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 sind benutzerdefinierte CSS-Eigenschaften?
Mit benutzerdefinierten CSS-Eigenschaften (auch CSS-Variablen genannt) können Sie einen wiederverwendbaren Wert einmal definieren und im gesamten Stylesheet verwenden. Sie folgen der Syntax --name: value.
Benutzerdefinierte Eigenschaften deklarieren
Deklarieren Sie benutzerdefinierte Eigenschaften auf jedem Element. Eine Deklaration auf :root macht sie global verfügbar:
<div class="demo">Custom properties declared on :root</div>
Die Funktion var() verwenden
Verweisen Sie mit der Funktion var() auf eine benutzerdefinierte Eigenschaft:
<button>Styled Button</button>
Benutzerdefinierte Eigenschaften werden vererbt
Benutzerdefinierte Eigenschaften folgen der normalen CSS-Vererbung. Eine auf einem übergeordneten Element definierte Eigenschaft ist für alle Nachfahren verfügbar, sofern sie nicht überschrieben wird.
<div class="card">
<div class="card__body">Inherits --card-bg from .card</div>
</div>
Ungültige Werte benutzerdefinierter Eigenschaften
Anders als bei regulären CSS-Eigenschaften führt ein ungültiger Wert einer benutzerdefinierten Eigenschaft nicht dazu, dass die Deklaration ignoriert wird – die Variable wird einfach unverändert zu ihrem Wert aufgelöst. Die verwendende Eigenschaft entscheidet anschließend, ob dieser gültig ist.
Benutzerdefinierte Eigenschaften vs. Sass-Variablen
Die wichtigsten Unterschiede:
- Benutzerdefinierte CSS-Eigenschaften sind im Browser dynamisch – sie werden während der Laufzeit aktualisiert
- Sass-Variablen werden zur Build-Zeit vollständig kompiliert
- Benutzerdefinierte Eigenschaften können mit JavaScript geändert werden
- Benutzerdefinierte Eigenschaften berücksichtigen Kaskade und Vererbung
Namenskonventionen
Benennen Sie benutzerdefinierte Eigenschaften nach ihrer Bedeutung, nicht nach ihrem visuellen Wert. Dadurch lassen sie sich später leicht aktualisieren:
<p class="demo">Named --color-primary, --color-text, --size-spacing-sm</p>
Globaler und komponentenbezogener Gültigkeitsbereich
Definieren Sie globale Tokens in :root und komponentenspezifische Werte in der Root-Klasse der Komponente:
<div class="card">Global font-size-base + component-scoped card vars</div>
Benutzerdefinierte Eigenschaften in calc()
Benutzerdefinierte Eigenschaften funktionieren innerhalb von calc() – bei Berechnungen von Abmessungen müssen sie Einheiten enthalten:
<div class="nav">Navbar (var(--nav-height))</div>
<div class="main-content">Main content fills the rest via calc()</div>
Responsive benutzerdefinierte Eigenschaften
Ändern Sie die Werte benutzerdefinierter Eigenschaften innerhalb von Media Queries für responsive Token-Systeme:
<div class="section">Padding grows to 6rem on wide screens</div>
Benutzerdefinierte Eigenschaften für Animationen
Animieren Sie Elemente, indem Sie eine benutzerdefinierte Eigenschaft ändern (häufig über JavaScript), statt mehrere einzelne Eigenschaften zu ändern:
<div class="progress-track">
<div class="progress"></div>
</div>
Kurzer Test
Wie deklarieren Sie eine globale benutzerdefinierte CSS-Eigenschaft namens --accent?
Zusammenfassung
Benutzerdefinierte CSS-Eigenschaften werden mit --name: value deklariert und mit var(--name) verwendet. Deklarieren Sie globale Tokens auf :root und begrenzen Sie Komponentenwerte auf die Selektoren der jeweiligen Komponente. Sie sind dynamisch, berücksichtigen die Kaskade und können mit JavaScript geändert werden – dadurch sind sie wesentlich leistungsfähiger als Sass-Variablen.
Häufig gestellte Fragen
Ist die Lektion „Benutzerdefinierte Eigenschaften deklarieren und verwenden“ kostenlos?
Ja — der vollständige Text von „Benutzerdefinierte Eigenschaften deklarieren und verwenden“ 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 „Benutzerdefinierte Eigenschaften deklarieren und verwenden“?
Definieren Sie CSS Custom Properties mit dem Präfix -- und verwenden Sie sie mit der Funktion var(). 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 „Benutzerdefinierte Eigenschaften deklarieren und verwenden“?
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
- Benutzerdefinierte Eigenschaften deklarieren und verwenden
- Fallback-Werte und var()
- Variablen auf Komponenten begrenzen
- Variablen mit JavaScript aktualisieren