Phlow Blog
Neues aus Webdesign, Social Media & Journalismus

Webdesign-Arbeitstiere: Sass & Compass

Seit ich vom c’t Redakteur Jo Bager Ende 2012 auf Sass hingewiesen wurde, hat sich meine Arbeit mit CSS revolutioniert. Ich war und bin auch heute noch kein großer Anhänger des Terminals (Mac), aber die kurze Einarbeitungszeit hat sich gelohnt. Diese war nötig, da dass zu Sass gehörende Programm nur über die Kommandozeile gestartet werden kann. Aber was ist Sass eigentlich?

Variablen und wiederverwendbare Code-Schnipsel

Sass ist eine Metasprache, die CSS erweitert. Im Gegensatz zu CSS ermöglicht Sass unter anderem Variablen und so genannte Mixins. Mit Variablen definiert man an einer Stelle des Dokumentes einen Wert, z.B. einen Farbwert. Anschließend nutzt man im restlichen CSS-Dokument nur noch die Variable. Modifiziert man den Wert der Variable, ändern sich sämtliche CSS-Styles, die die Variable nutzen.

Mit Hilfe von Mixins definiert man wiederverwendbare Code-Schnipsel. Innerhalb dieser Code-Schnipsel darf man auch Argumente wie Variablen nutzen.

compass-logo

Zusammen mit einem so genannten Preprocessor macht die Arbeit mit großen CSS-Dateien dann so richtig Laune. Denn der Preprocessor interpretiert Sass und generiert am Ende das zu nutzende Stylesheet. Arbeitet man z.B. mit dem Preprocessor Compass so komprimiert (minify) der Processor auf Wunsch die CSS-Datei und löscht sämtlichen überflüssigen Schnickschnack. Da die Sass-Datei dabei nicht angerührt wird, arbeitet man trotz minifizierter Version weiterhin an seiner übersichtlichen Datei.

Und so funktioniert die Arbeit mit Sass

  1. Man startet den Preprocessor (bei mir Compass) und
  2. befiehlt dem Programm einen Ordner samt Unterordner zu überwachen.
  3. Anschließend erstellt man eine .scss-Datei,
  4. welche vom Preprocessor überwacht wird.
  5. Ändert man die .scss-Datei,
  6. generiert der Preprocessor automatisch die dazugehörende CSS-Datei.

Richtig Spaß macht das dann mit der Erweiterung bzw. mit dem Programm Compass. Denn Compass integriert zahlreiche bewehrte CSS-Techniken, übernimmt die Kalkulation von Werten, und, und, und… Auch Compass ist ein freies, kostenloses Werkzeug.

Durchstarten mit den Videotutorials zu Sass & Compass

Mit den Videoanleitungen von Level Up Tuts lernt man schnell Sass und Compass. Scott Tolinski erklärt verständlich den Umgang und Sinn von Sass & Compass. Auch sonst ist der YouTube Kanal von Level Up Tuts sehr empfehlenswert.

Autor: Moritz »mo.« Sauer
6. Oktober 2013