2.1 Deklaration von CSS-Variablen
CSS-Variablen, auch als Custom Properties bekannt, ermöglichen es, Werte zu definieren, die in verschiedenen Teilen des CSS-Codes wiederverwendet werden können. Sie vereinfachen das Management von Styles erheblich und erhöhen deren Flexibilität.
CSS-Variablen werden mit einem doppelten Bindestrich (--) deklariert und können in jedem Selektor festgelegt werden. Um jedoch die Verfügbarkeit der Variablen im gesamten Dokument sicherzustellen, werden sie oft im Root-Selektor :root definiert.
Syntax:
selektor {
--variablen-name: wert;
}
Beispiel:
In diesem Beispiel werden vier Variablen deklariert: --main-bg-color, --main-text-color, --primary-color, und --font-size.
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
Verwendung von CSS-Variablen
Um den Wert einer Variablen zu verwenden, wird die Funktion var() verwendet, die den Variablennamen als Argument annimmt.
Syntax:
selektor {
eigenschaft: var(--variablen-name);
}
Beispiel:
In diesem Beispiel werden die Werte der Variablen verwendet, um die Hintergrundfarbe, Textfarbe, Schriftgröße und Linkfarbe festzulegen.
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
2.2 Beispiele für die Verwendung von CSS-Variablen
Beispiel 1: Grundlegende Verwendung von Variablen
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
<body>
<p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
</body>
Ergebnis:
- Der Seitenhintergrund wird hellgrau sein
- Der Text wird dunkelgrau sein
- Die Schriftgröße wird 16 Pixel betragen
- Links werden blau sein
Beispiel 2: Überschreiben von Variablen in einzelnen Komponenten
CSS-Variablen können für einzelne Elemente oder Komponenten überschrieben werden, was Flexibilität bei der Gestaltung bietet:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
color: var(--main-bg-color);
}
.footer {
--primary-color: #e74c3c; /* Überschreiben der Variable */
background-color: var(--primary-color);
color: var(--main-bg-color);
}
<div class="header">
<p>This is the header.</p>
</div>
<div class="footer">
<p>This is the footer.</p>
</div>
Ergebnis:
- Der Hintergrund der Kopfzeile wird blau sein, der Text — hellgrau
- Der Hintergrund der Fußzeile wird rot sein (überschriebene Variable), der Text — hellgrau
Beispiel 3: Verwendung von Variablen in Kombination mit anderen Werten
CSS-Variablen können mit anderen CSS-Werten und -Funktionen kombiniert werden:
:root {
--padding: 10px;
--margin: 20px;
}
.container {
padding: var(--padding);
margin: var(--margin) auto;
border: 1px solid black;
}
<div class="container">
<p>This is a container with padding and margin.</p>
</div>
Ergebnis:
- Der Container hat Innen- und Außenabstände, die durch Variablen festgelegt werden
2.3 Verwendung von CSS-Variablen in JavaScript
Beispiel für die Verwendung von CSS-Variablen in JavaScript
CSS-Variablen können mit JavaScript dynamisch geändert werden, um Styles in Echtzeit anzupassen:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
<button id="toggle-theme">Toggle Theme</button>
<p>This is a paragraph.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--bg-color') === '#ffffff') {
root.style.setProperty('--bg-color', '#333333');
root.style.setProperty('--text-color', '#ffffff');
} else {
root.style.setProperty('--bg-color', '#ffffff');
root.style.setProperty('--text-color', '#000000');
}
});
Erklärung:
Beim Klicken auf die Schaltfläche werden die Werte der Variablen --bg-color und --text-color geändert, was zu einer Änderung der Hintergrund- und Textfarbe auf der Seite führt.
GO TO FULL VERSION