Variablen sind einer der Hauptgründe, warum CSS-Präprozessoren überhaupt existieren. Die Möglichkeit, eine Variable für etwas wie eine Farbe festzulegen, diese Variable im gesamten von Ihnen geschriebenen CSS zu verwenden und zu wissen, dass sie konsistent, DRY (Don't Repeat Yourself) und leicht zu ändern ist, ist nützlich. Sie können native CSS-Variablen („CSS Custom Properties“) aus denselben Gründen verwenden. Aber es gibt auch einige wichtige Unterschiede, die geklärt werden sollten.
Ein einfaches Beispiel für die Verwendung von Präprozessor-Variablen sieht so aus
$brandColor: #F06D06;
.main-header {
color: $brandColor;
}
.main-footer {
background-color: $brandColor;
}Das war die SCSS-Variante von Sass, aber alle CSS-Präprozessoren bieten das Konzept von Variablen: Stylus, Less, PostCSS usw.
Der obige Code würde im Browser nichts bewirken. Der Browser würde die Deklarationen nicht verstehen und sie verwerfen. Präprozessoren müssen in CSS kompiliert werden, um verwendet werden zu können. Dieser Code würde zu
.main-header {
color: #F06D06;
}
.main-footer {
background-color: #F06D06;
}Dies ist nun gültiges CSS. Die Variable war Teil der Präprozessor-Sprache, nicht des CSS selbst. Sobald der Code kompiliert ist, sind die Variablen weg.
In jüngerer Zeit unterstützt natives CSS CSS-Variablen oder „CSS Custom Properties“. Es ermöglicht Ihnen, Variablen direkt in CSS zu verwenden. Es gibt keine Kompilierung.
Ein einfaches Beispiel für die Verwendung von CSS Custom Properties sieht so aus
:root {
--main-color: #F06D06;
}
.main-header {
color: var(--main-color);
}
.main-footer {
background-color: var(--main-color);
}Diese beiden Demos erzielen exakt dasselbe. Wir konnten eine Farbe einmal definieren und sie zweimal verwenden.
Also dann… warum eine über die andere verwenden?
Warum native CSS Custom Properties verwenden?
- Sie können sie **ohne die Notwendigkeit eines Präprozessors** verwenden.
- Sie kaskadieren. Sie können eine Variable innerhalb jedes Selektors festlegen, um ihren aktuellen Wert zu setzen oder zu überschreiben.
- Wenn sich ihre Werte ändern (z. B. bei einem Media Query oder einem anderen Zustand), **malt der Browser bei Bedarf neu**.
- Sie können **mit JavaScript darauf zugreifen und sie manipulieren**.
Bezüglich der Kaskadierung ist hier ein einfaches Beispiel dafür:
:root {
--color: red;
}
body {
--color: orange;
}
h2 {
color: var(--color);
}Jedes <h2> wird orange sein, da jedes <h2> ein Kind von <body> sein wird, das eine höhere anwendbare Spezifität hat.
Sie könnten sogar Variablen innerhalb von Media Queries neu definieren und diese neuen Werte über alle dort verwendeten Stellen kaskadieren lassen, etwas, das mit Präprozessor-Variablen einfach nicht möglich ist.
Schauen Sie sich dieses Beispiel an, bei dem ein Media Query die Variablen ändert, die zur Einrichtung eines sehr einfachen Rasters verwendet werden.
Rob Dodson befürwortet CSS Custom Properties in CSS Variables: Why Should You Care?
Die Variablen, die [Präprozessoren] verwenden, leiden unter einem großen Nachteil: Sie sind statisch und können zur Laufzeit nicht geändert werden. Das Hinzufügen der Möglichkeit, Variablen zur Laufzeit zu ändern, eröffnet nicht nur die Tür zu Dingen wie dynamischem Anwendungs-Theming, sondern hat auch große Auswirkungen auf responsives Design und das Potenzial, zukünftige CSS-Funktionen zu polyfillen.
Er enthält eine Demo, bei der JavaScript Stile ändert. Es ändert nicht direkt die Stile von Elementen, es setzt lediglich einige CSS-Variablen im Handumdrehen zurück.
Wes Bos hat ebenfalls eine Demo davon in Aktion.
Siehe den Stift Update CSS Variables with JS von Wes Bos (@wesbos) auf CodePen.
Beachten Sie, dass ich hier viele Dinge über CSS Custom Properties weglasse. Sie können Fallbacks festlegen. Sie können calc() damit verwenden. Es gibt viele coole Tricks, die Sie damit machen können. Sehen Sie sich den Hausaufgaben-Abschnitt unten an!
Warum Präprozessor-Variablen verwenden?
- Der wichtigste Punkt: Es gibt keine Überlegungen zur Browserunterstützung. Sie werden zu normalem CSS kompiliert.
- Kleinigkeiten: Wie Sie Einheiten von einem Wert entfernen können, wenn Sie müssten.
Sie könnten sie zusammen verwenden
Es gibt überzeugende Gründe, beide zu verwenden. Sie könnten absolut einen CSS-Präprozessor haben, der CSS Custom Properties ausgibt. Ivan Ivanov hat eine Demo erstellt, die es Ihnen ermöglicht, die Syntax von CSS Custom Properties zu verwenden und durch Sass Code auszugeben, der Fallbacks hat.
Siehe den Stift Use CSS4 variables right now von $i.van(ov) (@vank0) auf CodePen.
Ich neige dazu zu denken, dass wir, sobald wir CSS Custom Properties ohne Bedenken hinsichtlich der Browserunterstützung verwenden können, diese einfach für die gesamte Variablenverwaltung verwenden werden. Wir könnten Präprozessoren immer noch für andere Annehmlichkeiten verwenden, aber die Variablenverwaltung in nativem CSS scheint so gut zu sein, dass es sich wahrscheinlich lohnt, sich ganz darauf zu konzentrieren.
Browserunterstützung von CSS Custom Properties
Diese Daten zur Browserunterstützung stammen von Caniuse, wo es mehr Details gibt. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 49 | 31 | Nein | 16 | 10 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 10.0-10.2 |
Hausaufgabenzeit: Level Up!
1) Sehen Sie sich Lea Verous' CSS Variables: var(–subtitle); an.
Sie behandelt viele praktische Anwendungen sowie einige Tricks wie die Kontrolle darüber, wann Variablen kaskadieren, und einige Stolpersteine.
2) Sehen Sie sich David Khourshids Reactive Animations with CSS an.
David teilt die Idee, dass die Verbindung von DOM-Ereignissen mit CSS-Variablen einige wirklich großartige UI-Dinge mit wenig Code bewirken kann. Schauen Sie sich seine Folien an (ab #26), die zeigen, wie großartig das ist.
3) Lesen Sie Harry Roberts' Pragmatic, Practical, and Progressive Theming with Custom Properties.
Sein Artikel erklärt, wie das benutzergesteuerte Theming von Websites mit CSS-Variablen erheblich einfacher wird.
4) Lesen Sie Roman Komarovs Conditions for CSS Variables.
Obwohl es ab und zu diskutiert wird, gibt es in CSS keine logischen Gatter (z. B. @if (true) { }). Wir faken dies manchmal mit Dingen wie :checked, aber das hängt vom DOM ab. Roman zeigt einen Trick, bei dem Sie 0 oder 1 auf eine Variable anwenden und diese dann mit calc() verwenden können, um eine boolesche Logik zu simulieren.
Toller Beitrag. Custom Properties dienen tatsächlich gut als API für die JavaScript-Manipulation.
Etwas Ähnliches und Bemerkenswertes bezüglich Custom Properties. Das Deklarieren eines Klassennamens wie
.--modifierbricht Ihr CSS in Safari Webkit, da es ihn als Custom Property und nicht als Klassennamen behandelt. Ich verwendete diese Namenskonvention, um stark genutzte globale Modifikatoren zu kennzeichnen, um Duplikationen in meinen BEM-Komponenten zu vermeiden, nur um zu meiner Enttäuschung festzustellen, dass, sobald Safari die offizielle Version von Custom Properties implementierte, so viel meines CSS in Safari/iOS Webview kaputt war...Ich weiß nicht, warum dies als Custom Property geparst werden sollte, wenn ein Punkt eindeutig eine Klasse bezeichnet, dies in CSS schon immer der Fall war und daher Vorrang vor Custom Properties haben sollte. Ich hoffe, Apple behebt dies in zukünftigen Versionen, obwohl, da es nun geschehen ist, immer die Möglichkeit bestehen wird, dass diese Version von Safari/Webkit mit dem Fehler darin herumhängt.
(Schauen Sie sich diesen Pen in Safari an, um zu sehen, was ich meine) http://codepen.io/ericwshea/pen/ALwVPW
Safari folgt der CSS-Spezifikation. Ich bin überrascht, dass andere Browser das zulassen.
Quelle: https://www.w3.org/TR/CSS2/syndata.html#value-def-identifier
Ich empfehle dringend,
.--classnamenicht zu verwenden, falls diese Konvention in Zukunft für etwas anderes verwendet wird, z. B. für Variablennamen.Danke für die Info! *facepalm* Ich hätte die Dokumentation prüfen sollen.
Gibt es einen Link zu diesem Artikel über Bedingungen? Ich schätze, ich könnte ihn googeln.
Der Artikel wurde aktualisiert: http://kizu.ru/en/fun/conditions-for-css-variables/
Danke für den Vergleich, Chris! Die Vorteile von CSS-Variablen sind ziemlich aufregend.
Sie haben einen Link zu Romans Komarovs Artikel vergessen, hier ist er: http://kizu.ru/en/fun/conditions-for-css-variables/
Keine IE/Edge-Unterstützung: Nicht in einer Produktionsumgebung nutzbar.
Bitte machen Sie Ihren Blog übersichtlicher. Können Sie die caniuse-Statistiken am Anfang Ihrer Blogbeiträge angeben? (Vielleicht als iFrame, damit caniuse automatisch aktualisiert wird).
Der Beitrag heißt „Was ist der Unterschied zwischen CSS-Variablen und Präprozessor-Variablen?“, nicht „Sind CSS-Variablen für Sie bereit für die Produktion?“. Daher beginne ich zur Klarheit damit und gehe DANN auf die Browserunterstützung ein.
Ich habe caniuse-Daten direkt im Blogbeitrag, und er ist so geschrieben, dass er frische Daten direkt von dort abruft und zwischenspeichert (höchstens einige Tage).
Woho! Schöner Artikel Chris! Eine Theme-Switcher-Demo mit CSS-Variablen ist in meinem Artikel verfügbar, den ich neulich veröffentlicht habe. Ein weiterer Anwendungsfall :)
https://pawelgrzybek.com/css-custom-properties-explained/
Ich habe letztes Jahr über CSS-Variablen geschrieben (auf Französisch). Ich habe zwei Beispiele dafür gegeben, wie großartig CSS-Variablen für die Erstellung von einfachem CSS-Code sein können.
Das erste Beispiel ist das Theming von Blöcken mit unterschiedlichen Farben. Gleiche Präsentation, aber jedes Mal mit einer anderen Hauptfarbe. Sie können eine Demo ohne CSS-Variablen und eine mit CSS-Variablen sehen. Vergleichen Sie die beiden CSS-Dateien (mit und ohne Variablen), um zu sehen, wie sauberer der Code mit CSS-Variablen ist.
Das zweite Beispiel ist die Erstellung generischer Sprite-Animationen. Sie können eine Animation mit einem Variablenwert erstellen.
Und dann den Variablenwert festlegen und diese Animation aufrufen.
Vergleichen Sie eine Live-Demo dieser Technik ohne CSS-Variablen und mit CSS-Variablen.
Ich glaube, man kann CSS-Variablen auch nicht in Media Queries verwenden.
Danke dafür.
Ist das nur bei mir so, aber für mich ist Sass großartig wegen seiner Modularität. In welchem Workflow oder Projekt würden Leute mehr Effizienz durch die Verwendung dieser CSS-Variablen gewinnen, wenn sie mit ihrem CSS einfach nicht so konsistent wären?
Für mich ist Sass in dieser Hinsicht ein großer Vorteil, wenn ich an größeren Projekten arbeite.
Es sieht gut aus, aber leider ist es ohne IE-Unterstützung nicht für die Produktion geeignet :/
Gibt es PostCSS-Plugins wie Autoprefixer, die Custom Properties für IE parsen, aber sie für Chrome und Firefox zulassen?
Danke für den Artikel. Kann dies im winLess-Framework verwendet werden?
Tolle CSS-Tricks mit viel Material.
sehr beeindruckend und informativ