SASS

Syntactically Awesome Style Sheets

SASS – Eine von drei dynamsichen CSS-Sprachen

Benötigt

Online

  • Neue ".sass", ".scss" oder ".less"-Datei im Editor erstellen
  • Inhalt kopieren, im Online-Compiler einfügen & kompilieren
  • Kompilierte Datei kopieren & in die ".css" im Editor einfügen
  • Im ".html"-Dokument das ".css"-Dokument verlinken
  • Projekt im Editor abspeichern & im Browser testen

Offline

  • Ruby installieren
  • Compiler Installieren
  • Neue ".sass"-Datei im Editor erstellen & abspeichern
  • Im ".html"-Dokument das kompilierte Stylesheet (.css) verlinken
  • Projektordner im Compiler verlinken
  • Projekt im Editor abspeichern & im Browser testen

Demo

Sass in der Praxis

Pro

  • Erweiterte Funktionsumfang (Variablen, Nesting, direkter Import, uvm.)
  • Kleine Lernkurve – großer Effekt
  • Effizienteres & schnelleres umsetzen von Styles

Contra

  • Keine "Autokorrektur-Funktion" in Dreamweaver & co.
  • Ein Programm mehr im Workflow
  • Eine Fehlerquelle mehr bei koordinierten Gruppenprojekten

Fragen?