Sass (Syntactically Awesome Stylesheets) erschien im Jahr 2007 unter der Gestaltung von Hampton Catlin und der Entwicklung von Natalie Weizenbaum und Chris Eppstein. Sass ist eine Stylesheet Sprache, welche das Schreiben von CSS (Cascading Stylesheets) erleichtert – sie interpretiert den Code und generiert daraus CSS-Code (Präprozessor). Eines der wichtigen Merkmale von Sass ist der objektorientierte Ansatz, welcher hier in Form von „Mixins“ auftritt, dazu später mehr.

Neben der Sass-Syntax gibt es auch eine neuere und weiter verbreitete Form die SCSS-Syntax (Sassy CSS). Das verwendete Dateiformat hat die Endung .scss.

Wie wird SCSS in ein Projekt eingebunden?

Die Nutzer der Betriebssysteme Windows und Linux müssen im ersten Schritt Ruby installieren, bei Mac Nutzern ist Ruby bereits installiert. Ruby kann hier heruntergeladen werden. Die Version kann in der Kommandozeile überprüft werden:

ruby –v

ruby 2-0.0p481

Im zweiten Schritt steht die Installation von Compass an. Compass ist ein Open Source CSS-Framework welches zum Einen verantwortlich für das Compiling ist und zum Anderen auch nützliche Funktionen bietet (siehe http://compass-style.org/). Dazu einfach folgenden Befehl in die Kommandozeile eingeben:

gem install compass

Nun haben wir Ruby und Compass installiert. Im nächsten Schritt erfolgt das tatsächliche Einbinden. Hierzu muss zunächst eine Konfigurationsdatei erzeugt werden. In dieser Datei kann Compass mitgeteilt werden woher es die .scss-Dateien holen und wo es die fertig kompilierten .css-Dateien ablegen soll.

In der Konsole wechseln wir nun in das Hauptverzeichnis des Projekts und führen folgenden Befehl aus:

compass config

Nun wird ein Ordner /config erzeugt. In diesem befindet sich die Datei „compass.rb“. Nun muss die Datei in „config.rb“ umbenannt werden, damit sie als Konfigurationsdatei erkannt wird. (Die Datei „config.rb“ kann alternativ auch von händisch erzeugt werden)

Die neu erzeugte Datei sieht so aus:

http_path = “/“
css_dir = “stylesheets“
sass_dir = “sass“

Die Pfade müssen relativ zum Hauptverzeichnis des Projektes angegeben werden.

Nach dem Einbinden navigieren wir in das Verzeichnis /config und geben in die Konsole „compass compile“ ein um die CSS-Datein zu erzeugen.

compass compile

Mit dem Befehl „compass watch“ findet eine automatische Kompilierung statt sobald eine Änderung in einer SCSS-Datei gemacht wurde.

compass watch

SCSS – Syntax

header, footer {
  width: 100%;

  a {
    color: #0000ff;

    &:hover {
      color: #000000;
    }
  }
}

Wird kompiliert zu:

header, footer {
  width: 100%;
}

header a, footer a {
  color: blue;
}

header a:hover, footer a:hover {
  color: white;
}

Syntax Unterschiede Sass / SCSS

Im Wesentlichen besteht der Unterschied der beiden Stylesheet Sprachen in der Schreibweise. Bei SCSS ist für das Verschachteln nicht das Einrücken des Quelltextes notwendig. Stattdessen wird es wie die klassische CSS-Schreibweise gehandhabt; über geschweifte Klammern und Semikolons am Ende jeder Regel.
Die drei Scriptsprachen im direkten Vergleich:

SCSS

header, footer {
  width: 100%;

  a {
    color: #0000ff;

    &:hover {
      color: #000000;
    }
  }
}

Sass

header, footer 
  width: 100%;
  
  a 
    color: #0000ff;

    &:hover 
      color: #000000;

CSS

header, footer {
  width: 100%;
}

header a, footer a {
  color: blue;
}

header a:hover, footer a:hover {
  color: white;
}

SCSS und die Nutzung von Variablen und Mixins

Variablen

Variablen dienen dazu bestimmte Werte in Stylesheets konsistent zu halten. Außerdem erhöht es wesentlich die Wartbarkeit des Quelltextes.

$linkColorSecond: #fff;

a {
  color: $linkColorSecond;
}

Wird kompiliert zu:

a {
  color: white;
}

Mixins

Mixins sind prinzipiell an Funktionen aus klassischen Programmiersprachen angelehnt, denn es können Argumente zur Weiterverarbeitung übergeben werden. Mixins stellen einen Verweis auf ganze Codeabschnitte dar, sie tauchen jedoch nach dem Kompilieren nicht mehr im CSS auf. Beispielsweise indem die Hintergrundfarbe eines Containers mittels übergebenem Wert geändert wird:

@mixin descriptionBox($color) {
  padding: 10px;
  border: 1px dotted #008000;
  background: $color;
}

a {
  @include descriptionBox(#FFFF00);
}

Wird kompiliert zu:

a {
  padding: 10px;
  border: 1px dotted green;
  background: yellow;
}

SCSS Vorteile / Nachteile gegenüber CSS

Vorteile

• grundsätzliche Vorgaben (z.B. Farben, Größen usw.) können zentral definiert werden
• einmal eingetragene Eigenschaften können immer wieder benutzt werden (Mixins)
• der Compiler prüft auf korrekte Syntax, erkennt Schreibfehler, bricht den Kompilierungsprozess ab und schreibt die Fehler in die Ausgabedatei
• übersichtliche und einheitliche Schreibweise
• der Compiler optimiert die CSS-Datei (Selektoren werden gruppiert usw.)
• automatisiertes Erstellen von CSS-Sprites

Nachteile

• erschwertes Debbugging bei ausgeschalteten Zeilenkommentaren
• bei Benutzung von externen Plugins kann es zu Versionskonflikten kommen

Webseiten zu diesem Thema

www.compass-style.org
www.sass-lang.com
www.ruby-lang.org