Guten Abend zusammen, wie letzte Woche in einem Nebensatz erwähnt möchte ich euch diese Woche kurz Sass vorstellen.

Sass ist, genau wie Less, eine Sprache um uns mit unübersichtlichem CSS zu helfen. Das bedeutet: Variablen, Abhängigkeiten, Vererbung, usw. Außerdem ist Sass um einiges älter als Less (Sass: 2007, Less: 2009) und (laut Wikipedia) sogar Ideengeber.

Sass CSS vs LESS

Gegenüber Less gibt es nur wenige Unterschiede…

• Anders als Less wird Sass nicht vom Client zur Laufzeit ausgeführt, sondern einmalig vom Entwickler. Das gerenderte CSS muss dann nur noch auf den Webserver gelegt und auf der Webseite eingebunden werden. Von dieser Seite sagt mir Sass etwas mehr zu als Less – Einziger Nachteil: Sass wird (primär) nur für Ruby angeboten. Die PHP’ler (zu denen ich mich zähle) müssen sich wohl oder übel eine inoffizielle PHP- oder Javascript-Bibliothek suchen.
• Die Syntax (wer hätte das gedacht). Sass gibt es in zwei Ausführungen – Die neuere ist dem nativen CSS relativ ähnlich (etwa wie Less), die ältere Schreibweise erinnert dagegen mehr an Sprachen wie YAML (wie es auch in symfony genutzt wird) – Es wird mit Einrückung und ohne Semikola gearbeitet.
• Der Funktionsumfang. Gegenüber Less kann Sass noch mit einigen zusätzlichen Features protzen: Zusätzlich zu Punkten wie „mixins„, Vererbung und einfachen Abfragen bietet Sass noch diverse Schleifentypen, viel feinere Abfrage-Möglichkeiten und Ausgabe-kompression (Leerzeichen entfernen, Styles zusammenfassen, …).

Natürlich möchte ich auch ein paar kleine Beispiele zeigen (abgeschaut von http://sass-lang.com/). Wie schon weiter oben geschrieben unterstützt Sass zwei Formate – Das neuere „SCSS“ (Kurzform für „Sassy CSS“):

// Beispiel von "SCSS" (neue Schreibweise)
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Und die ältere „Sass“ Schreibweise, die an Sprachen wie YAML angelehnt ist:

// Beispiel von "SASS" (alte Schreibweise)
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Welche Schreibweise wir auch verwenden, das Ergebnis wird folgendermaßen aussehen:

/* Geredertes CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Auch Sass hat uns die sogenannten „Mixins“ zu bieten, doch im Gegensatz zu Less wird hier ein eigener „Konstruktor“ genutzt um Mixins als solche zu markieren:

// SCSS Syntax von Mixins
@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-base;
}

Die Funktion der Mixins ist beinahe identisch zu der von Less (Die Sprachen haben beide ihre Vor- und Nachteile). Auch die anderen Features wie z.B. „Bedingungen“ sind vorhanden (Wenn auch wieder in einer ganz anderen Syntax)… Darüber hinaus bietet uns Sass sogar noch Schleifen wie „for„, „each“ und „while“ an:

// "Each" Schleife in Sass
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

Der obige Sass Code würde zu folgendem CSS gerendert werden:

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

Das ganze weiß durchaus zu gefallen, allerdings sollte ein wichtiger Faktor nicht außer Acht gelassen werden: Eine neue Sprache bzw. Syntax lernen kostet enorm viel Zeit und wird, zumindest zu Anfang, viel „Trial and Error“ zur Folge haben. Es gilt für sich selbst zu entscheiden ob sich der Aufwand lohnt – Speziell bei einem Funktionsumfang wie dem von Sass.

Ich persönlich finde zwar an beiden Sprachen großen gefallen, würde jedoch eher zur Nutzung von Less tendieren – Aus dem einfachen Grund das ich alles zur Laufzeit von Javascript erstellt bekomme und (auf Wunsch) das gerenderte CSS in eine eigene Datei packen und hochladen kann. Sass bietet zwar sehr viel mehr Funktionen und sonstige Features, doch die Syntax ist mir etwas zu umständlich (vor allem bei den mixins).

Mit diesen Worten möchte ich mich für diese Woche verabschieden und euch eine angenehme Rest-Woche wünschen!