Einführung in Sass

Sass Logo
Syntactically Awesome Stylesheets (Quelle: sass-lang.com)

Das Erstellen von neuen Layouts hat schon immer sehr viel Zeit in Anspruch genommen. Und bei jedem neuen Projekt stand man immer wieder vor denselben Problemen: Wie strukturiere ich mein CSS? Schließlich sollte das einige Jahre wartbar, übersichtlich und im besten Fall sogar wiederverwendbar sein. Der erste Schritt wäre das CSS in Module zu unterteilen: layout.css, content.css, typo.css usw. Jedoch sorgt diese Aufteilung ebenfalls sehr schnell für’s Chaos, wenn das Projekt über Jahre wächst. Wenn dann noch der Wunsch kommt, eine Farbe auszutauschen, dann ist der Tag endgültig hin und man macht Arbeit, die kaum im vollen Umfang bezahlt wird.

Es wäre doch gut, wenn wir pro Widget eine eigene CSS Datei hätten. Diese beinhaltet sämtlichen Code, den wir für das Widget benötigen. Das hat aber zur Folge, dass man unzählige Dateien in eine Seite einbinden muss. Außerdem hätte man immer irgendwo redundanten Code.

Als ein Widget bezeichne ich ein Element der Seite, der für dich geschlossen ist und theoretisch auch in einem anderen Projekt eingesetzt werden könnte. Beispiel: Slider, Tabs, Akkordions, Header, Footer, Schnellsuche usw.

Eine mögliche Lösung für viele Probleme sind sogenannte Präprozessoren. Diese haben eine CSS ähnliche Syntax und erweitern das CSS um Features, die die Arbeit mit CSS erleichtern. Es wird dabei immer richtigen CSS kompiliert.

Was ist Sass?

Sass (Syntactically Awesome Stylesheets) ist eins dieser Präprozessoren. Sass Dateien haben die Dateiendung .scss und werden können nach der üblichen CSS Syntax geschrieben werden. Eigentlich kann auch jede CSS-Datei einfach in eine SCSS-Datei umbenannt werden, wenn man ab einem bestimmten Moment mit Sass arbeiten möchte.

Um Sass verwenden zu können, ist Ruby erforderlich. Auf Unix-basierten Systemen sollte Ruby schon vorinstalliert sein. Auf Windows lässt es sich leicht installieren.

Eine Installationsanleitung findet ihr auf der offiziellen Seite.

Welche Vorteile bring Sass?

Variablen

Ein Segen für alle Frontend-Entwickler werden die Variablen sein. Sass erlaubt es uns diese zu definieren und somit alle Größen, Farben und Abstände an einem separaten Ort zu lagern. Es ist nicht mehr nötig aufwendig nach einem Farbwert zu suchen, wenn man an einer anderen Stelle diese Farbe erneut braucht. (Ober was noch schlimmer ist: Man öffnet erneut die Vorlage und pickt sich die Farbe raus. Dann kann es passieren, dass der Wert minimal, für das Auge vielleicht gar nicht sichtbar, abweicht. Somit wäre auch ein Suchen/Ersetzen nutzlos.) Muss eine Änderung erfolgen, so geschieht die an nur einer Stelle.

$headline-color: #ccc;
h1 { color: $headline-color; }
h2 { color: $headline-color; }

Verschachtelung

In Sass können die CSS-Regeln verschachtelt werden. Das erhöht die Übersicht extrem und gibt ein bisschen die Verschachtelung in der HTML-Datei wieder. Jedoch Achtung: Diese Funktion kann dazu verleiten sehr lange Selektoren zu erzeugen. Diese sind komplexer und weniger effizient.

ul {
  margin: 0;
 
  li {
    display: inline-block;
 
    a {
      display: block;
      color: #00f;
 
      &.active {
        color: #f00;
      }
    }
  }
}
ul {}
ul li {}
ul li a {}
ul li a.active {}

Das & entspricht dabei dem Eltern-Selektor.

Mixins

Mixins sind Sass Bausteine, die immer wieder verwendet werden können. Diese Bausteine können leicht mit einer @include Anweisung eingefügt werden. Dabei wird der Code, der im Mixin erzeugt wird, einfach an der Stelle des @include eingefügt.

@mixin text-color($color: #000, $headline: 0) {
  @if $headline == 1 {
    font-weight: bold;
  }
  color: $color;
}
 
h1 {
  @include text-color(red, 1);
}
h1 {
  font-weight: bold;
  color: red;
}

Ein Mixin ähnelt vom Aufbau einer Funktion von einer Programmiersprache. Es kann Parameter entgegennehmen und sogar if-Abfragen beinhalten.

Vererbung

Ein sehr oft verwendetes Feature ist die Vererbung in Sass. So lassen sich die CSS-Regeln sehr schnell und einfach auf ein anderes Element übertragen, ohne redundanten Code schreiben zu müssen. Ein gutes Beispiel hierfür wären Infoboxen. Diese gibt es meistens in verschiedenen Farben, aber mit einem gleichen Aufbau. (Fehlermeldung, Hinweis, Erfolgsnachricht usw.)

.message {
  border: 1px solid transparent;
  padding: 10px;
}
.error {
  @extend .message;
  border-color: red;
  color: red;
}
.success {
  @extend .message;
  border-color: green;
  color: green;
}
.message, .error, .success {
  border: 1px solid transparent;
  padding: 10px;
}
.error {
  border-color: red;
  color: red;
}
.success {
  border-color: green;
  color: green;
}

In den meisten Fällen ist es sinnvoller die Vererbung, anstelle von Mixins, zu verwenden, da der Code nicht wiederholt wird.

Zusammenfassen in eine Datei

Ich habe oben schon erwähnt, dass es viel einfacher wäre, wenn man pro Widget eine CSS-Datei hätte. Mit Sass können wir so problemlos arbeiten, denn es besteht immer die Möglichkeit mehrere SCSS-Datein, beim Kompilieren, zu einer einzigen CSS-Datei umzuwandeln.

Sass fasst alle Dateien in eine zusammen, die mit einem Unterstrich beginnen und in eine andere Datei, mit der @import Anweisung, geladen werden.

@import 'variables';
@import 'reset';
@import 'layout';
@import 'widget-xy';

Fazit

Mit Sass ist es möglich sehr große Projekte sehr sauber zu gestalten und Anpassungen in kürzester Zeit durchzuführen. Wobei ich Sass nicht nur für große Projekte empfehle.

Natürlich erfordert die Einarbeitung etwas Zeit, diese werdet ihr jedoch in kürzester Zeit wieder einholen.

ALL-INKL.COM