CodeGym/Kurse/Frontend SELF DE/Verwendung von CSS-Variablen

Verwendung von CSS-Variablen

Verfügbar

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.

CSS
: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.

CSS
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

CSS
: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);
}
HTML
<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:

CSS
: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);
}
HTML
<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:

CSS
:root {
  --padding: 10px;
  --margin: 20px;
}

.container {
  padding: var(--padding);
  margin: var(--margin) auto;
  border: 1px solid black;
}
HTML
<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:

CSS
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
HTML
<button id="toggle-theme">Toggle Theme</button>
<p>This is a paragraph.</p>
JavaScript
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.

1
Aufgabe
Frontend SELF DE,  Level 31Lektion 1
Gesperrt
Grundlegende CSS-Variablen
Grundlegende CSS-Variablen
1
Aufgabe
Frontend SELF DE,  Level 31Lektion 1
Gesperrt
CSS-Variablen und andere Werte
CSS-Variablen und andere Werte
Kommentare
  • Beliebt
  • Neu
  • Alt
Du musst angemeldet sein, um einen Kommentar schreiben zu können
Auf dieser Seite gibt es noch keine Kommentare