So einfach erstellen Sie Themen mit CSS-Variablen

In diesem Beispiel hat eines der Projektelemente ein etwas anderes Thema als der Rest.

Einer der besten Anwendungsfälle für CSS-Variablen ist die Themenerstellung. Damit meine ich nicht nur das Ändern von Themen für Ihre gesamte App, da Sie dies wahrscheinlich nicht sehr oft tun müssen. Relevanter ist die Möglichkeit, auf einfache Weise komponentenspezifische Themen zu erstellen.

Dies kann beispielsweise der Fall sein, wenn Sie ein E-Commerce-Produkt als zum Warenkorb hinzugefügt markieren müssen. Oder vielleicht hat Ihre Site einen Admin-Bereich, der einen dunkleren Seitenleistenbereich enthält.

Mit CSS-Variablen können Sie dies einfacher und flexibler als bisher tun. In diesem Artikel erkläre ich genau, wie.

Außerdem habe ich in meinem kostenlosen 8-teiligen CSS-Variablenkurs einen Screencast zur Themenerstellung erstellt. Wenn Sie mehr über den Kurs erfahren möchten, lesen Sie diesen Artikel.

Die Einrichtung

Wir werden mit einer Portfolio-Site als Beispiel arbeiten. Unser Ziel ist es, eines der Projekte in unserem Portfolio so zu präsentieren, dass es sich von der Masse abhebt. Technisch tun wir dies, indem wir dem bestimmten Element, das wir präsentieren möchten, eine Klasse hinzufügen.

So sieht die Portfolio-Site zunächst aus:

Ich werde mich nicht mit dem HTML-Code für die Website befassen, da dieser recht einfach ist und ich davon ausgehe, dass Sie HTML-Code beherrschen. Wenn Sie jedoch daran interessiert sind, mit dem Code herumzuspielen, habe ich hier einen Scrimba-Spielplatz dafür erstellt.

Lassen Sie uns jetzt direkt in das CSS springen. Hier ist unser Stylesheet, bevor wir mit der Verwendung von CSS-Variablen begonnen haben:

HTML, Körper {
  Hintergrund: #ffeead;
  Farbe: # ff6f69;
}
h1, p {
  Farbe: # ff6f69;
}
#navbar a {
  Farbe: # ff6f69;
}
.item {
  Hintergrund: # ffcc5c;
}
Taste {
  Hintergrund: # ff6f69;
  Farbe: # ffcc5c;
}

Wie Sie sehen, verwenden wir hier nur drei Farben: #ffeead, # ff9f96 und # ffcc5c. Wir verwenden sie jedoch häufig wieder. Dies ist also ein perfekter Anwendungsfall für CSS-Variablen.

Um es zu verwenden, müssen wir zuerst unsere Variablen deklarieren. Das machen wir in der: root-Pseudoklasse:

:Wurzel {
  --red: # ff6f69;
  --beige: #ffeead;
  --yellow: # ffcc5c;
}

Dann tauschen wir einfach unsere Hexadezimalwerte mit den Variablen aus:

HTML, Körper {
  Hintergrund: var (- beige);
  Farbe: var (- rot);
}
h1, p {
  Farbe: var (- rot);
}
#navbar a {
  Farbe: var (- rot);
}
.item {
  Hintergrund: var (- gelb);
}
Taste {
  Hintergrund: var (- rot);
  Farbe: var (- gelb);
}

Jetzt haben wir die Macht von Variablen in unserem CSS. Das heißt, wir können einfach --red in etwas anderes ändern und es wird auf unserer gesamten Website aktualisiert.

Wenn Sie Schwierigkeiten haben zu verstehen, was hier vor sich geht, lesen Sie den Artikel "CSS-Variablen lernen in 5 Minuten" oder schreiben Sie sich für den Kurs ein.

Thema erstellen

Jetzt erstellen wir das Thema. Wir möchten die Möglichkeit haben, einem unserer vier Projektelemente eine .featured-Klasse hinzuzufügen, um dieses Element vom Rest abzuheben. Insbesondere ändern wir Rot in # ff5564 und Gelb in # ffe55b.

So sieht es im Markup aus:

Diese Änderung sollte sich auf das Styling an vier verschiedenen Stellen auswirken:

  • Hintergrundfarbe des
  • Farbe des

  • Hintergrundfarbe der
  • Farbe der

Der alte Weg

Bisher mussten wir dieses Problem lösen, indem wir einen benutzerdefinierten CSS-Selektor für jedes Element innerhalb des .featured-Elements erstellten:

.featured {
  Hintergrund: # ffe55b;
}
.featured> h1 {
  Farbe: # ff5564;
}
.featured> button {
  Hintergrund: # ff5564;
  Farbe: # ffe55b;
}

Dieser Ansatz ist nicht sehr flexibel. Wenn Sie Ihrem Portfolio ein weiteres Element hinzufügen möchten, müssen Sie auch spezifische Selektoren für diese Elemente erstellen.

Der neue Weg

Mit CSS-Variablen wird es jedoch viel einfacher. Wir überschreiben die Variablen in der .featured-Klasse einfach wie folgt:

.featured {
  --yellow: # ffe55b;
  --red: # ff5564;
}

Da CSS-Variablen geerbt werden, verwenden alle Elemente in .featured, die auf --red oder - yellow verweisen, jetzt die lokalen Werte und nicht die globalen. Daher verwenden die Elemente