1.1 Was sind CSS-Variablen?
CSS-Variablen, auch bekannt als benutzerdefinierte Eigenschaften (custom properties), sind Variablen, die in CSS definiert sind und zur Speicherung von Werten wie Farben, Größen, Schriftarten und anderen CSS-Attributen verwendet werden können. Sie bieten effektive Möglichkeiten zur Verbesserung der Flexibilität und Wartbarkeit von Stilen auf Webseiten.
Was sind CSS-Variablen?
CSS-Variablen — das sind Variablen, die CSS-Eigenschaften speichern und mehrfach in verschiedenen Teilen von Stilen verwendet werden können. Sie werden mit doppeltem Bindestrich (--) definiert und können in jedem Selektor festgelegt werden. Meistens definiert man sie jedoch im Wurzelselektor :root, um sie im gesamten Dokument zugänglich zu machen.
Beispiel:
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
Wichtige Eigenschaften von CSS-Variablen:
- Wiederverwendung: CSS-Variablen ermöglichen es, einen Wert einmal zu definieren und ihn mehrfach in verschiedenen Teilen des CSS-Codes zu verwenden. Das hilft, Duplikate zu vermeiden und vereinfacht das Management von Stilen.
- Flexibilität: Die Werte der CSS-Variablen können je nach Bedingungen wie Elementzustand oder Media Queries geändert werden. Das ermöglicht es, adaptivere und dynamischere Stile zu erstellen.
- Vererbung: CSS-Variablen werden von übergeordneten zu untergeordneten Elementen vererbt, was die Verwaltung und Organisation von Stilen vereinfacht.
- Wartbarkeit: Die Verwendung von Variablen erleichtert die Codewartung, da Änderungen an Variablenwerten automatisch auf alle Elemente angewendet werden, die diese Variablen verwenden.
1.2 Beispiele für die Verwendung von CSS-Variablen
Beispiel für die Verwendung von CSS-Variablen in JavaScript:
document.documentElement.style.setProperty('--main-color', '#e74c3c');
Beispiel 1: Definition und Verwendung von Variablen
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
a {
color: var(--primary-color);
}
a:hover {
color: darken(var(--primary-color), 10%);
}
<body>
<p>Das ist ein Absatz.</p>
<a href="#">Das ist ein Link</a>
</body>
Erklärung:
- In diesem Beispiel sind drei Variablen definiert:
--main-bg-color,--main-text-colorund--primary-color - Diese Variablen werden verwendet, um Hintergrundfarbe, Textfarbe und Linkfarbe festzulegen
1.3 Ändern von Variablenwerten in JavaScript
In diesem Beispiel werden Variablen verwendet, um das Theme der Seite festzulegen. Beim Klicken auf einen Button ändern sich die Variablenwerte, was zu einer Änderung des Hintergrunds und der Textfarbe führt:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
<button id="toggle-theme">Theme umschalten</button>
<p>Das ist ein Absatz.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--main-bg-color') === '#f0f0f0') {
root.style.setProperty('--main-bg-color', '#333');
root.style.setProperty('--main-text-color', '#f0f0f0');
} else {
root.style.setProperty('--main-bg-color', '#f0f0f0');
root.style.setProperty('--main-text-color', '#333');
}
});
GO TO FULL VERSION