Wir hatten da mal eine virtuelle Redaktionssitzung und herausgekommen ist das hier: Ein kurzer Wissensaustausch rund um das zügige modulare CSS-Basteln mit Sass.

Corina Pahrmann: Du, Alex?

Alexander Plaum: Jau, was gibt’s?

CP: Magst du vielleicht noch mal einen Erklärbär-Post schreiben?

AP: Nicht lieber was über Filme oder Games?

CP: Nee, komm… ein Fachbegriff.

AP: Na gut. Welcher?

CP: Wie wär’s mit Sass?

AP: Sass ist ziemlich cool. Und praktisch! Gibt’s jetzt schon fast zehn Jahre, kennen aber längst nicht alle.

CP: Ich weiß. Deswegen solltest du ja auch erklären, was das ist. :-)

AP: Äh… Der Begriff ist ein Akronym und steht für „Syntactically Awesome Stylesheets“. Es geht also um Webdesign, genauer gesagt: Um eine aufgepimpte Version von CSS. Was CSS ist, wissen aber alle, oder?

CP: Klar, ich schätze schon.

AP: Ok. CSS ist ja bekanntlich keine richtige Programmiersprache – und kommt eher repetitiv/unelegant daher. Und an dieser Stelle setzten Hampton Catlin und seine Mitentwickler an.

CP: Und zwar wie?

AP: Nun, Sass ermöglicht es, CSS mit Variablen, Funktionen, Loops und solchen Sachen zu erweitern. Es ist übrigens ein sogenannter Präprozessor.

CP: Das könntest du auch noch mal kurz erklären.

AP: Ein Präprozessor ist ein Programm, das eingehackte Daten „vorbereitet“ und dann an ein anderes Programm weitergibt. Du schreibst also schönen Sass-Code, und der wird später in CSS kompiliert. Das ist noch ein wichtiger Punkt: Es ersetzt keine Stylesheets auf dem Server, sondern erleichtert deren Erzeugung.

CP: Und der konkrete Nutzen?

AP: Man spart halt Zeit und Nerven und Code-Zeilen. In Sass kannst du zum Beispiel ganz oben im Code eine Variable für die „Hausfarbe“ deines Lieblingsdackelzüchtervereins erzeugen (nennen wir sie: $dachshund-color) und ihr einen Farbwert zuweisen, zum Beispiel #ff69b4. Dann baust du ganz normal dein Stylesheet zusammen, setzt aber überall dort, wo du die Farbe nutzen willst (Überschriften, Buttons etc.), nicht den Farbwert selbst ein, sondern die Variable. Wenn du später alles in CSS umwandelst, steht an allen gewünschten Stellen: #ff69b4. Und der Clou: Wenn sich die Hausfarbe noch mal ändert, musst du sie nicht 23x im CSS austauschen, sondern nur an einer einzigen Stelle in der Sass-Datei. Cool, was?

CP: Sass macht aus Webdesignern quasi Programmierer.

AP: So ist es. Und da gibt es eine Menge abgefahrene Features, die ich teilweise selber nicht verstehe und somit auch nicht ausführlicher erklären kann.

CP: Musst du auch nicht. Wir brauchen hier erst mal einen Einstieg.

AP: Glück gehabt. :-) Dazu fällt mir noch ein, dass Einsteiger vermutlich die SCSS-Syntax nutzen wollen („Sassy CSS“) – und nicht die „richtige“ Sass-Syntax. Letztere ist nämlich an Ruby angelehnt und damit eventuell gewöhnungsbedürftig. Ruby muss man aber in jedem Fall auf seinen Rechner packen – sonst gibt’s keine Super-Stylesheets. Noch Fragen?

CP: Ja, könntest du noch erwähnen, dass das Thema in unserer Neuerscheinung CSS Secrets ausführlicher behandelt wird?

AP: Hast du doch gerade schon gemacht.

CP: Ok, dann sind wir durch.

AP: Awesome!