SASS, SCSS oder LESS – CSS Prä-Kompiler

—

von

Alexander Herbert
in

Was ist so toll daran, CSS via SASS, SCSS oder auch LESS umzusetzen?

Endlich habe ich den Sass CSS Prä-Kompiler unter Windows fertig eingerichtet, was ein Akt :D.
Nun können komplexe SASS, SCSS oder auch LESS Designs entworfen werden und nach CSS kompiliert.
  • der Pre-Compiler kann CSS Variablen umsetzen

Beispiel:

$background: #2a816d;
$background_with_transparency: rgba(42, 129, 109, 0.75);

body {

background: $background;
background: $background_with_transparency;

}

  • und er kann aus einfachem CSS Vendor compatible Code generieren, inkl. Version Fallbacks

Beispiel:

background: #2a816d; /* vollton Farbe */
background: rgba(42, 129, 109, 0.75); /* vollton Farbe mit Transparenz, wenn  der Browser es nicht unterstützt, lädt er den vorherigen Style*/

  • auch Nesting beherrscht er

Beispiel:

$background: #2a816d;
$background_with_transparency: rgba(42, 129, 109, 0.75);

body {

header {

background: $background;
background: $background_with_transparency;

}

}

woraus in CSS später das hier wird

body header {

background: #2a816d;
background: rgba(42, 129, 109, 0.75);

}

  • sowie Partials, also externe Anteile von CSS mit @import
  • Erweiterbar mit @extend
  • Hersteller Standards, sogenannte Mixins oder auch Pseudo Vendor Classes
  • der Kompiler kann mit Plugins erweitertet und automatisiert werden
  • Mit einem CSS Pre-Compiler werden Veränderungen in CSS geschrieben

Einem Entwickler und Webdesigner soll dies langfristig darin unterstützen, sich mehr auf seine eigentliche Aufgabe zu widmen, statt Hersteller Angaben und ggf. tausende Zeilen Code immer wieder erneut nachzuarbeiten.

Gerade bei komplexen Designs und/oder Anforderungen kann dies sehr viel Zeit sparen, aber auch Ärger. Da die Hersteller Standards von SASS automatisch nachgetragen werden, braucht der Entwickler sich kaum mehr darum zu bemühen, es gibt unter anderem auch Plugins, mit den CSS Hacks automatisch erzeugt werden, wenn benötigt.

Wo wird verwendet?

In der Regel findet es in den meisten Web Template Frameworks wieder, welche eine Horde an CSS Vorlagen mitbringen. Mit Sass sind dessen Entwickler also besser dran.

Aber auch in Apps findet SASS zunehmen Anwendung, sowohl in Backend wie auch in Frontend GUIs.

Was ist es für mich?

Etwas, dass mir Zeit spart, denn das ist für mich im Ersten Ansatz der beste Aspekt an SASS. Nehmen Wir an ich änderen die Farbe des Headers, muss aber dafür in diverse Dateien, dies macht nun SASS für mich, ich trinke einen Kaffee.

Ist es irgendwo störend?

Ich wette, auf Windows ist die Einrichtung von SASS ein Kinderspiel. Auf Windows braucht man dafür dieses, dann noch jenes, dann muss man sich manches zusammenreimen und durch Zufall alles richtig gemacht haben.

Letztendlich muss es ja im Hintergrund Dateien überwachen, bei Windows ergo ein weiteres Fenster, manchmal ist also mehr als die halbe Taskleiste voller gestarteter Anwendungen, dass kann auch mal den Überblick kosten :D

Der Prä-Komplier ist Open Source, wird zahlreich in der internationalen Industrie und Gastronomie im Bereich der Webentwicklung eingesetzt.

Ich bin nun Ready for SASS on Windows

Ihr persönlicher IT Dienstleister:
A. Herbert

SASS, SCSS oder auch LESS auf Windows