So fügen Sie CSS-Variablen hinzu, um WordPress-Child-Themes anzupassen

CSS-Variablen, auch als benutzerdefinierte CSS-Eigenschaften bezeichnet, ermöglichen eine einfache Wiederverwendung in Ihren CSS-Stylesheets. Wenn Sie mit WordPress-Child-Themes gearbeitet haben, werden Sie wahrscheinlich viel Styling und Überschreibung von Dingen wie Farbe, Polsterung usw. vornehmen müssen. Wenn Sie neu im Webdesign sind, ist es erwähnenswert, dass nichts gegen die Verwendung von Plain spricht CSS. CSS-Variablen sind optional und je weiter Sie fortgeschritten sind, desto mehr werden Sie erkennen, wie Ihnen Variablen zugute kommen.

Diese sind nicht dazu gedacht, CSS-Präprozessoren zu ersetzen, wobei SASS am beliebtesten ist. Ich verwende SASS speziell für größere Projekte, und zusammen mit CSS-Variablen als Kernstück bietet es alle erweiterten Optionen. Wenn Sie jedoch schon einmal mit Präprozessoren gearbeitet haben, wissen Sie, dass diese kompiliert werden müssen, um das CSS auszugeben. Aus diesem Grund konzentriert sich dieses Tutorial auf CSS-Variablen und geht nicht auf Details zu Präprozessoren ein.

CSS-Variablen sind ein goldener Mittelweg. Glücklicherweise gibt es eine starke Browserunterstützung. Bevor Sie sich verpflichten, sie in der Produktion zu verwenden, überprüfen Sie unbedingt Can I Use, um sicherzustellen, dass sie die Unterstützung haben, die Sie benötigen. Sie sind effizienter als die Arbeit mit einfachem CSS, erfordern jedoch kein erweitertes Setup wie SASS. Der Browser übernimmt das „Kompilieren“, und Sie sind nicht auf die Einrichtung und Umgebung angewiesen, die das kompilierte CSS ausgeben.

Dieser Ansatz ist ein gutes Projekt, das für Dinge wie das Gestalten einfacher WordPress-Child-Themes geeignet ist. Bei Projekten wie diesem besteht in der Regel die Notwendigkeit, Styling-Updates vorzunehmen, um ein Markenthema zu erstellen. Mir gefällt die Tatsache, dass ich eine überschaubare Liste von Stilüberschreibungen habe und nicht das Bedürfnis verspüre, eine Umgebung einzurichten, die SASS in CSS kompiliert.

Holen Sie sich Genesis Framework & StudioPress-Designs kostenlos!

Wenn Sie Ihre Websites auf Flywheel hosten, haben Sie direkt von unserem ansprechenden Dashboard aus Zugriff auf über 30 Premium-WordPress-Themen (einschließlich Genesis!). Das ist ein Wert von über 2.000 $, mit dem Sie für nur 15 $/Monat beginnen können! Erfahren Sie hier mehr.

Verwendung von CSS-Variablen

Wenn Sie bestimmte Farben verwenden, um auf der Marke zu bleiben, ist eine häufige Anforderung, eine Markenfarbpalette zu haben, die immer wieder verwendet werden kann. Es wird überflüssig, jedes Mal denselben Farbwert einzugeben. Was ist außerdem, wenn Sie einen der Farbwerte im Satz ändern möchten? Zum Beispiel muss ein Blau vielleicht etwas dunkler sein. Dies passiert die ganze Zeit. Ja, natürlich gibt es das bewährte Suchen und Ersetzen. Das Anpassen des Werts an einer Stelle ist jedoch effizienter, wenn diese globale Änderung vorgenommen wird und Variablen wiederverwendet werden.

So sieht eine CSS -Variable aus:

:root {
--text-black: #232525;
}

header {
color: var(--text-black);
}

Da ich den Arbeitsablauf zum Gestalten eines untergeordneten WordPress-Themes rationalisiere, habe ich die Variablen zu meiner Datei styles.css “ hinzugefügt. Dies ist nur die „kurze Liste“, und wenn weitere hinzugefügt werden, wird es wichtig, jede Variable effizient zu benennen.

:root {
--white: #ffffff;
--black: #232525;
--mid-gray: #eeeeee;
--brand-red: #e50000;
}

Die var()-Funktion

Wie werden Variablen eigentlich verwendet? Es ist ziemlich einfach. Zuerst wird die Variable deklariert und dann im benötigten CSS-Regelsatz verwendet. Umfang ist eine wichtige Sache, die man beachten sollte. Variablen müssen innerhalb eines CSS-Selektors deklariert werden, der sich innerhalb des beabsichtigten Geltungsbereichs befindet. In vielen Fällen müssen Variablen im globalen Bereich verfügbar sein, damit sie für alle zugänglich sind. Sie können entweder den :root oder den body -Selektor für den globalen Geltungsbereich verwenden. Es kann jedoch Fälle geben, in denen Sie den Gültigkeitsbereich einschränken müssen und mit einer Variablen mit lokalem Gültigkeitsbereich arbeiten möchten.

Es ist einfach, Variablen zu erkennen; sie haben zwei Bindestriche vor ihnen. Die beiden Bindestriche (–) müssen enthalten sein.

Die Syntax von var() ist ziemlich einfach:
var(variable-name, value)

:root {
--light-gray: #eeeeee
--text-black: #434344
}

.sidebar {
--background-color: var(--light-gray);
--color: var(--text-black);
}

Anstatt die Farbe an mehreren Stellen anzupassen, wird der Variablenwert an einer Stelle angepasst.

Mit dem Webinspektor (in diesem Fall Chrome) können Sie prüfen und sehen, welche Variablen verwendet werden.

Das folgende Beispiel definiert zunächst globale benutzerdefinierte Eigenschaften mit den Namen --light-gray und --text-black . Die Funktion var() wird aufgerufen, die den Wert der benutzerdefinierten Eigenschaften später in das Stylesheet einfügt:

:root {
--light-gray: #eeeeee;
--text-black: #434344;
}

.sidebar {
background-color: var(--light-gray);
color: var(--text-black);
}

Es ist erwähnenswert, dass Variablen bei der Arbeit mit CSS-Breakpoints sehr nützlich sein können. Durch die Verwendung von Variablen mit globalem Gültigkeitsbereich an verschiedenen Haltepunkten können Dinge wie Polsterung und andere nützliche Stile für verschiedene Größen angepasst werden.

:root {
--gutter: 5px;
}

section {
padding: var(--gutter);
}

@media (min-width: 600px) {
:root {
--gutter: 15px;
}
}

Hier ist ein Beispiel für Variablen, die im lokalen Geltungsbereich zu finden sind. Wir haben bisher nur den globalen Geltungsbereich berührt, Sie werden also feststellen, dass die Dinge nicht in der Wurzel liegen. Dies sind Stile für eine Warnmeldung. Hier ist eine Warntextfarbe deklariert, die nur für diese Klasse nützlich ist. Es ist auch erwähnenswert, dass calc auch verwendet werden kann.

.warning {
--warning-text: #ff0000;
--gap: 20;
color: var(--warning-text);
margin-top: calc(var(--gap) * 1px);
}

Die obigen Beispiele behandeln die Grundlagen von CSS-Variablen. Diese Konzepte können auf benutzerdefinierte WordPress-Designs oder jedes andere benutzerdefinierte CSS, das Sie schreiben, angewendet werden. Variablen haben Vorteile gegenüber einfachem CSS und helfen Ihnen, effizienter zu arbeiten, wenn Sie seitenweite Änderungen vornehmen. Sie ermöglichen besser organisierte Stylesheets, ohne dass ein Präprozessor erforderlich ist.

Was kommt als nächstes: Plugins

Laden Sie dieses E-Book herunter, um eine Liste unserer am meisten empfohlenen Plugins für Entwickler zu erhalten! Wir haben festgestellt, dass all diese Plugins einfach zu bedienen, nicht zu leistungsintensiv auf Ihrer Website und einfach absolut zuverlässig sind.

Lieben Sie diesen Artikel? Versuchen Sie eines davon:

• So erstellen Sie ein Kartenlayout mit CSS Grid Layout
• So kombinieren Sie Flexbox- und CSS-Raster für effiziente Layouts
• Einfache Anpassungen für Ihr untergeordnetes Genesis-Theme