CSS Variablen vs SCSS

Da CSS früher keine Dynamik hatte musste man sich weiteren Tools behelfen um eine gewisse Dynamik zu bekommen und wiederkehrende Werte praktisch einsetzten zu können. Sicherlich ist SASS & LESS das bekannteste davon, dann kam SCSS was wiederum etwas praktischer zum schreiben ist.

Was unterscheidet nun die oben genannten Arten im Vergleich zu den CSS Variablen?
Um SASS, LESS und SCSS zu verwenden muss das CSS kompiliert werden, was den Nachteil hat das man in der erstellten kompilierten CSS keine Änderungen machen kann ohne das später das ganze überschrieben wird wenn der kompilier Vorgang neu gestartet wird.

Das Problem wiederrum gibt es bei den CSS Variablen nicht mehr, man definiert die Variable direkt in der CSS Datei.
Das ganze sieht wie folgt aus.

:root {
  --style-color: #542654;
  --Style-Color: #789654;
}

.bodytext {
  color: var(--style-color);
}
h1 {
  color: var(--Style-Color);
}

Wir definieren die Variable mit 2 Bindestrichen (–), hier zu erwähnen ist das das ganze case sensitiv ist was heisst das Groß- und Kleinschreibung zu beachten ist wie im Beispiel zu sehen.

Im Grunde würde mit den CSS Variablen auf den ersten Blick die Behilftools wegfallen müssen, was mit Sicherheit mit der Zeit auch immer mehr passieren wird.


Warum verwendet man dann nicht mehr nur die CSS Variablen?

Tja hier gibt es schon noch den ein oder anderen Grund warum die Entwickler nicht explizit sich nur auf die CSS Variablen verlassen.

Zum einen unterstützen nicht alle Browser die CSS Variablen aktuell ca. 8% der Browser die es nicht unterstüzen, hier mal wieder der übliche verdächtige IE bis einschl. der 11 Version und noch ein paar andere ältere Versionen anderer browser. Je nachdem ob man Wert drauf legt ob die Website in diesen Browsern sauber angezeigt wird oder nicht.

Es gibt auch weitere Gründe wie z.B. das berechnen der bestimmter Werte die eben mit SASS & Co praktischer zu handhaben sind als mit den CSS Variablen.

Alles in allem denke ich das sich die CSS Variablen früher oder später komplett intergrieren und man SASS & Co wohl kaum noch verwenden wird.
Es liegt klar auf der Hand das es unheimlich viel praktischer mit CSS Variablen zu arbeiten als auf Tools auszuweichen die eben etwas mehr Aufwand erfordern.

Je nach Anforderung kann man eben dies oder das verwenden.