Um eine CSS-Variable zu nutzen, musst du zunächst eine Variable definieren. Eine Möglichkeit ist die Verwendung von :root, das den gesamten Dokumentbaum betrifft. Du kannst die Variable in ein :root-Selektor schreiben und ihr einen Namen und einen Wert zuweisen. Beispiel:
:root {
--main-color: #66CCCC;
}Eine andere Möglichkeit ist die Verwendung einer Klasse oder ID, die du in einem bestimmten Element anwenden kannst.
.my-class {
--main-color: #66CCCC;
}Sobald die Variable definiert ist, kannst du sie verwenden, indem du den Variablennamen in ein Feld einfügst.
body {
background-color: var(--main-color);
}Es ist wichtig zu beachten, dass nicht alle Browser die Verwendung von CSS Variablen unterstützen, daher empfehle ich dir ein Tool zu verwenden um diese zu kompilieren bevor du sie im Browser verwendest.
Ein Beispiel für ein solches Tool ist "PostCSS". Es ist ein Nachbearbeitungswerkzeug für CSS, das es ermöglicht, CSS-Variablen und andere erweiterte Funktionen zu verwenden, die von älteren Browsern nicht unterstützt werden. Mit PostCSS kann man die CSS-Code vor dem Einsatz im Browser kompilieren und die nicht unterstützten Funktionen ersetzen oder entfernen, um sicherzustellen, dass der Code auf allen Browsern korrekt dargestellt wird.
Du kannst auch ein Backup-Wert angeben, falls der Browser die Variablen nicht unterstützt:
body {
background-color: var(--main-color, #66CCCC);
}Ich hoffe, dass diese Anleitung hilfreich war und du erfolgreich damit CSS-Variablen in deinen Projekten verwenden kannst.
(Werbung) Möchtest du dein Wissen und Fähigkeiten im Bereich CSS erweitern? Dann solltest du unbedingt diesen Link anschauen: https://amzn.to/3iFRZ5K. Hier findest du eine Auswahl der besten Bücher zum Thema CSS auf Amazon. Egal ob du Anfänger oder Fortgeschrittener bist.