„Sass makes CSS fun again“, mit diesem Satz wollen die Autoren von SASS vermitteln, dass CSS (Cascading Style Sheets) durch SASS wieder Spaß machen soll. Auch wenn viele Anfänger sich nun fragen warum CSS keinen Spaß machen sollte, wenn es doch so viele Möglichkeiten mit sich bringt. CSS3 bringt viel Features mit, wie beispielsweise Animationen, neue Möglichkeiten der Typografie oder media-querys. Doch CSS3 bringt auch mehr Komplexität mit sich. Mehr Komplexität und
doch nur die gleichen, alten Möglichkeiten zum Arbeiten. Das Sortiment besteht lediglich aus Selektoren, Attributen und Werten. SASS steht für „Syntactically Awesome Stylsheets“ und ist eine Stylesheet Sprache, entworfen von Hampton Catlin und entwickelt von Nathan Weizenbaum. SASS versteht sich als Metalanguage, und ist eine Scriptsprache welche zu reinem CSS kompiliert wird.

SCSS steht für „Sassy CSS“ und existiert seit SASS 3.0 und soll vor allem bei der CSS3 Entwicklung unterstützen.
SASS war ursprünglich Teil des Haml Projektes bevor es zu einem eigenständigen Projekt wurde.
Es soll einem also Spaß bereiten, doch kann es auch mehr als CSS?
Die Antwort ist Nein.
SASS soll das stylen mit CSS unterstützen und Arbeit abnehmen. Nebenbei wird dem Ganzen eine Prise Spaß beigemischt.
Es bietet keinerlei neue Attribute und Möglichkeiten Markup zu stylen! Auch wenn SASS dynamisch scheint so bleibt am Ende doch nur ein statisches CSS.
SASS unterstützt Entwickler besonders in dem es die „Dry“-Regel befolgt.
„Don‘t Repeat Yourself“ lautet die Regel ausgesprochen und vermittelt die Dringlichkeit die Redundanz zu vermindern.
Z.B. kann durch SASS die hohe Wiederholungsrate an Selektoren reduzieren.
Durch SASS wird aus folgendem CSS ein SASS Code-Abschnitt ohne Redundanz.

css vs sass
Abbildung: Darstellung der Hauptnavigation in CSS und in SASS

Hierbei wird verschachtelt um Wiederholungen der Selektoren zu vermeiden. Dies spart nicht nur Zeit, sondern bietet auch die Möglichkeit
schnell Änderungen durchzuführen, falls die ungeordnete Liste (ul) z.B. zur geordneten Liste (ol) werden soll. Neben Variablen, gibt es auch noch
zusätzliche Möglichkeiten die SASS bietet. SASS versteht mathematische Ausdrücke, wie z.B. 1em + 1em oder auch mit Variablen: $width + 50px .
Des Weiteren kann SASS Schleifen verstehen, sowie Bedingungen und Logik Operatoren und sogar eigene Funktionen.

Als Fazit gibt es nur noch zu sagen: SASS ist ein tolles Tool um gut lesbaren, nicht redundanten kurzum großartigen CSS Code zu bauen.
Wer sich weiter darüber belesen will kann unter http://www.sass-lang.com/ nachschauen.

 

Quellen:

Abbildung : Eigene Darstellung

http://sass-lang.com/

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.