SASS (& Compass) – Die ersten Schritte

Da ich viel mit Webdesign und Programmierung zu tun habe ist es zugegeben seltsam, dass ich mich jetzt erst mit dieser Technologie auseinandersetze, aber irgendwie hab ich davor nie die Zeit gefunden. SASS (oder zuvor LESS) ist nun schon seit einiger Zeit in aller Munde. Aber was ist eigentlich SASS?

SASS ist ein sogenannter Preprocessor. Um es vereinfacht auszudrücken: Er erweitert CSS um viele nützliche Funktionen wie Variablen, Subtemplates, mathematische Operationen benutzerdefinierte Funktionen und vieles mehr.

Ich habe mir SASS mal ein wenig angeschaut und möchte nachfolgend nun ein wenig über die Ersten Schritte berichten. Es werden aber sicher noch weitere Artikel folgen.

Die Installation lasse ich außen vor. Hierzu gibt es viele Wege und diese sind je nach Betriebssystem doch sehr verschieden. Google hilft hier, den richtigen Weg zu finden. Es braucht nur ein paar Minuten um es zu installieren und es gibt Lösungen mit GUI die sogar ohne den Terminal auskommen. Ich werde hier dennoch den Weg über den Terminal beschreiben.

Hinweis: Ich habe SASS direkt zusammen mit Compass installiert was meiner Meinung nach absolutSinn macht. Dazu vielleicht in einem späteren Artikel mehr.

Nun aber zu meinen ersten Schritten:

1) Config-Datei erzeugen

Im Projekt-Verzeichnis (was man sich irgendwo angelegt hat) führt man den folgenden Befehl aus (dazu bewegt man sich zuerst per $ cd Pfad/Projektordner in das entsprechende Verzeichnis):


Nun erzeugt compass eine Config-Datei: config/compass.rb die ich nun entsprechend meinen Wünschen angepasst habe:

2) Die erste SCSS-Datei erzeugen

So wie ich das verstehe gibt es zwei Syntaxen die man verwenden kann: SASS oder SCSS. SCSS ist die neuere Schreibweise und gleicht im wesentlichen CSS mit einigen Ergänzungen. SASS kommt ohne geschweifte klammern und Semicolons aus und benutzt hier nur Zeilenumbrüche:


Ich habe mich also entschieden und mein erstes Dokument sass/screen.scss angelegt und direkt mal möglichst viel eingebaut. Was SASS so alles kann bzw zumindest einen kleinen Überblick bekommt ihr hier.

3) CSS-Datei erzeugen lassen

Nun einmal kurz in den Terminal  und den compile befehlt ausgeführt:


Und schon erzeugt mir (nachdem ich zuvor einen Fehler beseitigen musste.. an Fehlermeldungen bei CSS muss ich mich wohl gewöhnen) das Script folgenden CSS-Code in css/screen.css:

4) Ordner überwachen

Wer nicht immer $ compass compile  eingeben will wenn er eine Änderung gemacht hat kann Compass auch anweisen den Ordner zu Überwachen und automatisch beim speichern die Dateien zu kompilieren:


 

Fazit

Auch wenn ich bisher irgendwie immer einen Bogen um SASS gemacht habe fange ich schon an es zu bereuen. SASS ist auf jeden Fall einen Blick wert und scheint mir viele meiner täglichen Probleme zu lösen und Arbeitsabläufe zu erleichtern. Über das ein oder andere werde ich sicher noch bloggen.

Wenn du es noch nicht getan hast: Wirf einen Blick auf SASS und probiere es selber aus. Es lohnt sich trotz der Hürde der Installation oder des ungewohnten Arbeitens im Terminal.

Eine Antwort auf „SASS (& Compass) – Die ersten Schritte“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.