Syntactically Awesome Stylesheets (SASS)

Sascha Rudolph

vor 14 Jahren

Wie schon im vorherigen Beitrag (CSS Vererbung und Kaskadierung) beschrieben, haben wir euch ein wenig über den CSS Tag von Tschitschereengreen am 7. August 2010 in Dresden berichtet.

In diesem Artikel geht es um den zweiten Teil – Syntactically Awesome Stylesheets (SASS) von Christian Kaula. Ein Paar Informationen zum Autor gibt es natürlich wieder vorweg:

Christian Kaula ist Diplom-Informatiker und bezeichnet sich selbst als „Lazy (Fauler) Coder“. Dies ist aber nicht als Nachteil zu sehen, ganz im Gegenteil, denn dadurch entdeckt er immer wieder interessante Tools, die Ihm, und auch Programmierern das leben einfacher machen. Nach diesem kurzen Einstieg fangen wir jetzt an. Viel Spaß!

Wir empfehlen euch, diesen Blog Beitrag in Kombination mit unserem Audio Podcast – Syntactically Awesome Stylesheets (SASS) – zu lesen.

Du kannst die Präsentation auch im Original Vortrags PDF mit verfolgen. PDF hier downloaden!

Was ist SASS?

SASS ist eine Metasprache auf Basis von CSS und vereinfacht das CSS durch Entfernung.
Das heißt, das es Elemente verkürzt (einspart) die ich immer wieder schreiben muss.
Es ist sozusagen ein Tool, in dem ich nicht mehr CSS schreibe, sondern SASS.
Dieses Tool erzeugt mir aus dem SASS Code wieder CSS. Dieses CSS ist das normale CSS was wir kennen. Jedoch habe ich als Entwickler nicht mehr die Arbeit, dieses CSS selbst zu schreiben. Denn mit SASS wird dieser CSS Code verändert geschrieben. Der Computer generiert daraus später wieder ein normales Stylesheet. Als Entwickler hat man eine Zeitersparnis, denn SASS fasst viele Elemente zusammen.

Sass Features

Variablen

z.B. Farben – Mit SASS werden Variablen zusammengefasst und auch gekürzt.
z.B. Abstände – Man hat einen Standard Abstand, und muss diesen nur einmal angeben. Bei späteren Änderungen kann man die Abstände addieren. Das heißt wir haben z.B. ein Bild mit margin:20px. Wir wollen bei einem anderen Bild aber einen Abstand von 25px haben. Dann können wir mithilfe von SASS, unseren Grundabstand von 20px um 5px erhöhen, indem wir diese 5px zu unserem Standardwert addieren.

Funktionen

SASS bringt Helferfunktionen mit, die es mir erleichtern mit Farben o.ä. zu arbeiten.

Nesting

Nesting bedeutet das ich Selektoren nicht mehr von Hand schreibe muss, sondern ich kann entscheiden das ich den Teil an Selektoren, welcher sich wiederholt, einfach auslassen. SASS generiert mir hierzu die Fehlenden Selektoren.

Mixins

Man kann hiermit Code erzeugen wenn ich weiß, das sich mehrere Klassen bestimmte Eigenschaften teilen. Man definiert eine Standart klasse und kann diese Eigeneschaften in andere Klassen einfügen. Ich muss somit nicht extra wieder per Hand die gleichen Eigeneschaften eintragen, sondern kann diese Automatisch einfügen lassen.

Vererbung