LimeSoda Blog

The sassy way to code

Sass steht für „Syntactically Awesome Style Sheets“ und ist ein CSS Preprocessor, der einige Vorteile gegenüber gewöhnlichem CSS anbietet. Sass stellt zwei Syntaxen zur Verfügung. Eine Möglichkeit besteht in dem gleichnamigen Sass Syntax, welcher weder Klammern noch Semikolons verwendet. Der Bevorzugte ist jedoch „Sassy CSS“, kurz SCSS, da er dem herkömmlichen CSS Syntax ähnelt.

Das Sass File wird zu einem normalen CSS File kompiliert und kann somit wie gewohnt in Websites eingebunden werden. Es stehen verschiedene Compiler, wie Compass, Koala, CodeKit und weitere zur Verfügung.

 

Wieso Sass?

Ganz einfach, es ist super awesome! Hat man einmal damit gearbeitet, will man nicht mehr darauf verzichten.

Der Preprocessor bietet folgende Features:

Variablen: Mit Sass können Werte in Variablen gespeichert und immer wieder verwendet werden. Der Vorteil dabei ist, wenn man den Wert verändert, wird dieser wie aus Zauberhand überall geändert. Man erspart sich dadurch das Suchen und Ersetzen im Code.

Nesting: Man kann eine übersichtliche Struktur schaffen, indem man Elemente ineinander verschachtelt.  Es wäre jedoch am besten, wenn man nicht mehr als 3 Ebenen hat, da sonst der Code zu komplex wird und die Unübersichtlichkeit zunimmt.

Partials: Sass Files werden klein und übersichtlich gehalten. Für jede Komponente wird ein eigenes File erstellt. Das erhöht zwar die Fileanzahl, aber es führt zu mehr Übersichtlichkeit.

Import: Es gibt die Möglichkeit eine „Haupt“ Sass Datei zu erstellen, welche alle anderen Files importiert. Diese Datei wird in CSS umgewandelt. Da alle anderen Sass Files importiert werden, wird der ganze Code auf einmal kompiliert.

Mixins: Welchen Frontend-Entwickler nerven nicht die Angaben von Präfixen? Sass macht uns das Leben einfacher. Einmal in einem Mixin angegeben, können sie immer und überall eingebunden werden. Übergabeparameter ermöglichen die individuelle Anpassung der Elemente.

Extends/Vererbung: Die geliebte und bekannte Vererbung, die wir von der Objektorientierten Programmierung kennen, ist auch mit Sass möglich. Mit dem Zauberwort @extend können Attribute von anderen Klassen übernommen werden.

Operators: Ich hätte nicht gedacht, dass ich mich einmal so darüber freuen würde, aber MATHE MATHE MATHE :D. Werte können mit den mathematischen Operatoren +, -, *, / und % berechnet werden.

Funktionen: Sass bietet das Schreiben von eigenen Funktionen und die Verwendung von bereits vorgegebenen Funktionen an. Farben können beispielsweise durch die bestehenden Funktionen „lighten“ aufgehellt oder „darken“ abgedunkelt werden.

 

Nicht so sassy

Auf der anderen Seite gibt es natürlich auch einige Nachteile:

Kompilation: Die Zeit, die für die Kompilation vergeht, verlangsamt den Entwicklungsprozess. Das Kompilieren kann einige Zeit dauern und hindert den Developer am weiterarbeiten.

Performance: Die Sass Files sind zwar klein gehalten, aber das generiete CSS File ist ziemlich groß. Und auf genau dieses File kommt es schlussendlich an.

Editor: Nicht jeder Editor unterstützt Sass. Sollte man wirklich die gewohnte Umgebung verlassen, nur um ein neues Tool verwenden zu können?

Verständnis: Ein unbekanntes Framework bedeutet Einarbeiten. Es dauert seine Zeit bist man Sass im Griff hat und um es effektiv nutzen zu können, ohne dabei Probleme zu entwickeln.

Nesting: Die Verschachtelung ist gleichzeitig ein Fluch und ein Segen. Man kommt sehr schnell in den Genuss alles schön und sorgfältig zu verschachteln. Schlussendlich hat man ein File mit vielen vielen Ebenen, welche die Übersicht erschweren und die Komplexität erhöhen.

 

Nach über einem Jahr Verwendung von SCSS und jetzt während meines Praktikums durch die intensive Arbeit damit, kann ich es trotz Makeln nur weiterempfehlen. Man gewöhnt sich sehr schnell an die Vorteile und möchte auf diese nicht mehr verzichten. Eine weitere Empfehlung ist Sass in Kombination mit Bootstrap. Die eigenen Klassen können mithilfe von Sass von den Bootstrap Klassen erben. Das hält das HTML File klein und übersichtlicher.

Rating: 5.0/5. Von 1 Bewertung.