• Zuhause
  • Artikel
  • Einführung in benutzerdefinierte CSS-Eigenschaften (Variablen).
Veröffentlicht am 24-03-2019

Einführung in benutzerdefinierte CSS-Eigenschaften (Variablen).

Grundsätzlich teilt CSS dem Browser mit, wie HTML-Seiten angezeigt werden. Bisher war die Pflege von CSS ein sehr großes Problem für größere Projekte oder komplexe Apps. Der Bau wiederverwendbarer Komponenten und sauberer Stile war in den letzten Jahren schwer zu erreichen.

CSS-Preprozessoren kamen zur Lösung dieses Problems und sind bereits seit Jahren im Einsatz (SASS, LESS, e.t.c). Sie erweitern CSS mit Schlüsselfunktionen wie Variablen, Operatoren, Interpolationen, Funktionen, Importen, Mixins e.t.c.

$ black: # 000;
Karosserie {
 Hintergrundfarbe: $ schwarz;
}

In Modern CSS verfügen wir jedoch jetzt über eine neue leistungsstarke Funktion namens Benutzerdefinierte Eigenschaften, die auch als CSS-Variablen oder als kaskadierende Variablen bezeichnet wird. Jetzt können Sie Variablen direkt in Ihrem CSS deklarieren, ohne CSS-Präprozessoren verwenden zu müssen.

In diesem Artikel werde ich Ihnen zeigen, wie Sie mit CSS-Variablen beginnen. Auf geht's :)

Wenn Sie mit JavaScript oder anderen Programmiersprachen vertraut sind, sollten Sie bereits wissen, wie Variablen funktionieren.

let name = 'Bolaji Ayodeji'

Grundsätzlich kann eine Variable Informationen oder Daten speichern, die später in Ihrem Programm verwendet werden.

console.log (Name);

Was sind CSS-Variablen?

Benutzerdefinierte Eigenschaften (manchmal als CSS-Variablen oder kaskadierende Variablen bezeichnet) sind von CSS-Autoren definierte Entitäten, die bestimmte Werte enthalten, die im gesamten Dokument wiederverwendet werden können. Sie werden mithilfe der benutzerdefinierten Eigenschaftsnotation festgelegt. - MDN DOCS

CSS-Variablen-Syntax

Eine CSS-Variable wird mit einer speziellen Syntax definiert, mit zwei Strichen vor dem Variablennamen (--variable-name), einem Doppelpunkt und dem Variablenwert.

.container {
 --schwarz: # 000;
}

Zugriff auf die Variable

Sie können auf die bereits deklarierte Variable mit var () zugreifen.

.container {
 --schwarz: # 000
 Farbe: var (- schwarz);
}

Variables-Bereich

CSS-Variablen können in jedem CSS-Element definiert werden.

Karosserie {
  --Farbe Rot;
}
h1 {
  --Farbe Rot;
}
p {
  --Farbe Rot;
}
span {
  --Farbe Rot;
}
ein {
  --Farbe Rot;
}

Durch das Hinzufügen von Variablen zu einem Selektor werden diese jedoch NUR für seine untergeordneten Elemente verfügbar. Wenn Sie eine Variable in einem .container-Selektor hinzufügen, ist diese nur für Kinder von .container verfügbar. Außerhalb von .container würde die Variable nicht funktionieren.

Obwohl p für rot festgelegt ist, funktioniert es nur für p-Tags in .container. Alle p außerhalb von .container würden diesen Stil nicht erben.

: Wurzel

: root ist eine CSS-Pseudoklasse, die das Dokument selbst identifiziert.

Eine bessere Möglichkeit, CSS-Variablen zu deklarieren, ist das Hinzufügen der Variablen zu: root, wodurch sie für alle Elemente auf der Seite verfügbar ist.

Jetzt sind alle p-Tags unabhängig von ihrer Position oder ihrem übergeordneten Element rot.

CSS-Variablen unterscheiden zwischen Groß- und Kleinschreibung

Diese Variable:

--Farbe Rot;

ist nicht das Gleiche wie:

--Farbe Rot;

Fallback-Wert für var () setzen

var () akzeptiert einen zweiten Parameter, den Standardwert für den Fallback-Wert, wenn der Variablenwert nicht festgelegt ist:

p {
  Farbe: var (- rot, # f00);
}

Hier haben wir vergessen zu deklarieren --red, aber p hat immer noch die rote Farbe, weil wir bereits einen Fallback-Wert haben.

Browser-Unterstützung

Browser-Unterstützung für CSS-Variablen gemäß Can I Use.

CSS-Variablen werden in modernen Browsern unterstützt. Ich persönlich konzentriere mich nicht auf IE und weitaus ältere Browser, da viele Internetbenutzer moderne Browser verwenden, nur wenige sind es nicht. Wenn Sie Internet Explorer und ältere Versionen der anderen Browser nicht unterstützen müssen, sollten CSS-Variablen Ihre besten Freunde sein.

Fazit

CSS-Variablen folgen den normalen CSS-Kaskadenregeln, wobei die Prioritäten entsprechend der Spezifität festgelegt werden. Wir können die Werte von benutzerdefinierten Eigenschaften ebenso wie Standardeigenschaften in JavaScript verwenden.

Komplexe Websites enthalten sehr viele CSS-Werte, oft mit vielen wiederholten Werten. Zum Beispiel kann dieselbe Farbe an Hunderten von verschiedenen Orten verwendet werden, was eine globale Suche und Ersetzung erfordert, wenn diese Farbe geändert werden muss. Benutzerdefinierte Eigenschaften ermöglichen, dass ein Wert an einem Ort gespeichert und dann an mehreren anderen Stellen referenziert wird. Ein zusätzlicher Vorteil sind semantische Bezeichner. Zum Beispiel ist --black einfacher zu verstehen als # 00000, insbesondere wenn diese Farbe auch in anderen Zusammenhängen verwendet wird. -MDN

CSS-Variablen sind cool und sind geblieben. Wenn Sie möchten, dass Ihre CSS-Stile und -Entwicklungen sauberer, einfacher und effizienter werden, sollten Sie sich an CSS-Variablen halten :)

Weitere Informationen finden Sie hier

Siehe auch

In die Zukunft der Technologie investieren - Deep Rise Fund - Unser ManifestWarum Streets Of Rogue das Spielen wert istTech ist wie ein neues Paar SchuheWas zum Teufel ist ein Techtro?Warum machen die Lerntermine zum Scheitern verurteilt, wenn Sie Code lernen lernenDurch Iteration wachsen