Ein vorläufiges Verständnis der benutzerdefinierten CSS-Eigenschaften

Heute sind CSS-Präprozessoren der Standard für die Webentwicklung. Einer der Hauptvorteile von Präprozessoren besteht darin, dass Sie Variablen verwenden können. Dadurch entfällt das Kopieren und Einfügen von Code. Außerdem wird die Entwicklung und das Refactoring vereinfacht.

In diesem Artikel erfahren Sie, wie Sie CSS-Variablen in Ihren CSS-Entwicklungsworkflow integrieren, wodurch Ihre Stylesheets wartungsfreundlicher und weniger repetitiv werden.

Und nun lasst mich anfangen!

1* CSS-Variablensyntax

<1> Was sind CSS-Variablen?

Wenn Sie bereits eine Programmiersprache verwendet haben, sollten Sie bereits mit dem Konzept der Variablen vertraut sein. Mit Variablen können Sie Werte speichern und aktualisieren, die Ihr Programm zum Funktionieren benötigt.

Die Vorteile der Verwendung von Variablen in CSS unterscheiden sich nicht allzu sehr von den Vorteilen der Verwendung von Variablen in Programmiersprachen.

Hier ist, was die Spezifikation dazu sagt:

[Die Verwendung von CSS-Variablen] erleichtert das Lesen großer Dateien, da scheinbar beliebige Werte nun aussagekräftige Namen haben, und macht das Bearbeiten solcher Dateien viel einfacher und weniger fehleranfällig, da der Wert nur einmal in der benutzerdefinierten Eigenschaft geändert werden muss und die Änderung automatisch auf alle Verwendungen dieser Variable angewendet wird.

W3C-Spezifikation .

[Die Verwendung von CSS-Variablen] erleichtert das Lesen großer Dateien, da scheinbar beliebige Werte nun aussagekräftige Namen haben, und macht das Bearbeiten solcher Dateien einfacher und weniger fehleranfällig, da ein Wert nur einmal in einer benutzerdefinierten Eigenschaft geändert werden muss und diese Änderung automatisch an alle Stellen weitergegeben wird, an denen die Variable verwendet wird.

<2>Syntax für benutzerdefinierte CSS-Variablen

Um eine Variable anstelle einer allgemeinen CSS-Eigenschaft (wie Farbe oder Füllung) zu deklarieren, geben Sie einfach eine benutzerdefinierte benannte Eigenschaft an, die mit - beginnt:

.Kasten{
  --Boxfarbe: #4d4e53;
  --Box-Polsterung: 0 10px;
}

Der Wert einer Eigenschaft kann jeder gültige CSS-Wert sein: eine Farbe, eine Zeichenfolge, ein Layoutwert oder sogar ein Ausdruck.

Hier sind einige nützliche benutzerdefinierte Eigenschaften:

:Wurzel{
  --Hauptfarbe: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --Logo-Randfarbe: Rebeccapurple;
  --Header-Höhe: 68px;
  --Inhaltspolsterung: 10px 20px;
  --Grundlinienhöhe: 1,428571429;
  --Übergangsdauer: 0,35 s;
  --external-link: "externer Link";
  --margin-top: berechnen(2vh + 20px);
  /* Gültige benutzerdefinierte CSS-Eigenschaften können später beispielsweise in JavaScript wiederverwendet werden. */
  --foo: wenn(x > 5) diese.Breite = 10;
}

Wenn Sie sich bei :root nicht sicher sind: In HTML ist es dasselbe wie html, jedoch mit einer höheren Spezifität, dem Äquivalent einer globalen Variable.

<3> Verwendung von CSS-Variablen

var() Funktion

Um CSS-Variablen zu verwenden, nutzen Sie die CSS-Funktion var() und übergeben den CSS-Variablennamen an die Funktion:

.Kasten{
  --Boxfarbe: #4d4e53;
  --Box-Polsterung: 0 10px;

  Polsterung: var(--box-padding);
}

.box div{
  Farbe: var(--box-color);
}

Die Syntax der var()-Funktion lautet:

var( <Name der benutzerdefinierten Eigenschaft> [, <Deklarationswert> ]? )

Das erste Argument der Methode ist der Name des zu ersetzenden benutzerdefinierten Attributs. Das optionale zweite Argument der Funktion wird als Fallback-Wert verwendet. Wenn sich das erste Argument auf eine ungültige benutzerdefinierte Eigenschaft bezieht, verwendet die Funktion den zweiten Wert.

Sie können dies tun, wenn Sie nicht sicher sind, ob eine benutzerdefinierte Eigenschaft definiert wurde, und einen Wert als Fallback angeben möchten.

Zum Beispiel:

Farbe: var(--foo, rot, blau); //Geben Sie sowohl Rot als auch Blau als Fallback-Werte an; das heißt, jeder Wert zwischen dem ersten Komma und dem Ende der Funktion wird als Fallback-Wert betrachtet.

padding: var(--box-padding, var(--main-padding));

calc()-Funktion

Da wir an die Arbeit mit Präprozessoren und anderen Sprachen gewöhnt sind, erwarten wir, dass wir bei der Arbeit mit Variablen grundlegende Operatoren verwenden können. Zu diesem Zweck bietet CSS eine calc()-Funktion, die den Browser veranlasst, den Ausdruck nach jeder Änderung des Werts einer benutzerdefinierten Eigenschaft neu zu berechnen:

:Wurzel{
  --Einzugsgröße: 10px;

  --indent-xl: Berechnung (2*var(--indent-size));
  --indent-l: Berechnung(var(--indent-size) + 2px);
  --indent-s: berechnen(var(--indent-size) - 2px);
  --indent-xs: Berechnung(var(--indent-size)/2);
}

Wenn Sie mit einheitenlosen Werten arbeiten möchten, kann die Verwendung der Funktion calc() sehr praktisch sein:

:Wurzel{
  --Abstandshalter: 10;
}
.Kasten{
  padding: var(--spacer)px 0; /* FUNKTIONIERT NICHT */
  Polsterung: calc(var(--spacer)*1px) 0; /* FUNKTIONIERT */
}

Umfang benutzerdefinierter CSS-Eigenschaften

Benutzerdefinierte Eigenschaften unterliegen auch den CSS-Kaskadenregeln.

2* Verwenden Sie benutzerdefinierte CSS-Attribute mit JS

Angenommen, Sie haben eine CSS-Variable namens --left-pos mit einem Wert von 100px, der auf die Klasse .sidebar in Ihrem CSS-Dokument beschränkt ist:

.Seitenleiste {
--linke Position: 100px;
}

Den Wert von --left-pos können Sie wie folgt ermitteln:

const sidebarElement = document.querySelector('.sidebar');
const cssStyles = getComputedStyle(sidebarElement);
const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim();
Konsole.log(cssVal); //100px

Legen Sie den CSS-Eigenschaftswert fest:

sidebarElement.style.setProperty('--left-pos', '200px');

3* Was ist der Unterschied zwischen CSS-Variablen und Präprozessorvariablen?

Beim Stylen Ihrer Website nutzen Sie wahrscheinlich die Flexibilität von Variablen, indem Sie Präprozessoren wie Sass und Less verwenden.

Mit dem Präprozessor können Sie Variablen festlegen und diese in Funktionen, Schleifen, mathematischen Operationen usw. verwenden. Bedeutet dies, dass CSS-Variablen keine Rolle spielen?

Nicht genau, hauptsächlich weil CSS-Variablen sich von Präprozessorvariablen unterscheiden.

Der Unterschied besteht darin, dass CSS-Variablen echte CSS-Eigenschaften sind, die im Browser funktionieren, während Präprozessorvariablen in normalen CSS-Code kompiliert werden müssen, sodass der Browser nichts von ihnen weiß.

Dies bedeutet, dass Sie CSS-Variablen, Inline-Style-Attribute und SVG-Präsentationseigenschaften in Ihrem Stylesheet-Dokument aktualisieren oder diese mit JavaScript dynamisch bearbeiten können. Änderungen an benutzerdefinierten CSS-Eigenschaften werden sofort an die Stelle weitergegeben, wo sie verwendet werden. Präprozessoren können dies jedoch nicht leisten, da sie im Voraus kompiliert werden!

Das heißt aber nicht, dass Sie sich für das eine oder das andere entscheiden müssen: Nichts hindert Sie daran, die Superkräfte der Zusammenarbeit von CSS und Präprozessorvariablen auszunutzen.

Zusammenfassen

Das Obige ist meine Einführung in benutzerdefinierte CSS-Eigenschaften. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!