Sass – Eine Einführung

Wer heutzutage mit CSS arbeitet hat sicher schon von Sass gehört. Der CSS Preprocessor erfreut sich großer Beliebtheit und wer mal damit gearbeitet hat versteht sofort warum. Das Strukturieren und bearbeiten von Stylesheets in einem größeren Projekt ist äußerst zeitaufwendig und Sass ermöglicht uns mit kleinen Tools wie Variablen, Mixins und Partials eine riesige Aufwandsersparnis.

Was ist Sass überhaupt?

Sass ist ein sogenannter Preprocessor. Das bedeutet ganz einfach das Sass Tool nimmt den Code, den wir geschrieben haben und wandelt ihn in ordentliches CSS um, mit dem der Browser dann etwas anfangen kann. Durch diverse Logiken können wir so kompakten Code schreiben, den der Sass Processor dann mit einiger Logik in validen CSS Code verwandelt.

 

Was brauchen wir dafür?

Um Sass benutzen zu können brauchen wir ein Tool welches unsere Sass-Files in echte CSS Files umwandelt. Hierfür gibt es mehrere Möglichkeiten:

  1. Manche IDEs (wie in meinem Fall PhpStorm) bieten bereits die Möglichkeit, Sass Files automatisch zu CSS zu konvertieren.
  2. Von den Entwicklern gibt es diverse Konsolentools, die die Konvertierung übernehmen.
  3. Programme von Drittanbietern (wie z.B. Scout) bieten eine grafische Oberfläche für die Konsolentools und sind daher für Anfänger etwas besser geeignet. Diese gibt es sowohl in kostenpflichtigen als auch in Open Source Versionen.

Die Tools funktionieren alle relativ gleich. Wir wählen aus, welche Dateien überwacht werden sollen und sobald Änderungen an diesen Dateien festgestellt werden, konvertieren die Tools die Sass Files für uns automatisch in gültiges CSS. Durch diese Automatisierung fällt das Arbeiten natürlich wesentlich leichter als wenn wir jedes mal von Hand die Konvertierung anwerfen müssten.

Sass Grundlagen: Variablen und Verschachtelung

Ein Sass File sieht erstmal aus wie eine normale CSS Datei. Gehen wir also von folgender Grundlage aus:

Wie wir sehen sind hier schon einige Dinge, die sich wiederholen (zum Beispiel die ID #header) und auch fest eingestellte Werte (zum Beispiel die Hintergrundfarbe für den Header). Um das zu vereinfachen kommen wir direkt zu den ersten beiden Features die Sass uns zur Verfügung stellt: Variablen und Verschachtelung. Sehen wir uns obiges Beispiel in einer vereinfachten Version in Sass an:

Sehen wir uns nun das CSS an, dass unser Sass Processor für uns generiert, ist es genau dasselbe wie im obigen Beispiel. Trotzdem haben wir bereits einige Vorteile durch diese Vorgehensweise.

  1. Der Code wird durch die Verschachtelung und damit verbundene Einrückung wesentlich lesbarer und übersichtlicher
  2. Mit Hilfe der Variable $color-red können wir die Farbe schnell und an einer zentralen Stelle ändern. Das ist zum Beispiel interessant für Firmenfarben oder auch Schriftarten, die an vielen Stellen verwendet werden und einheitlich sein müssen.
  3. Dank der Einrückung können wir auch strukturelle Änderungen schnell und einfach vornehmen. Wird im HTML zum Beispiel unser Logo aus dem Header ausgegliedert können wir den betroffenen Block einfach komplett woanders einsetzen. Oder nennen wir unseren #header um in #kopfzeile kann das an einer zentralen Stelle passieren ohne die Gefahr von Suchen & Ersetzen Fehlern.

Partials und Import

Ein Partial ist ein kleiner Codeauszug den wir in mehreren Dateien verwenden möchten. Beispielsweise eine Sammlung von Variablen, die in mehreren CSS Dateien zum Einsatz kommt, kann damit schön zentralisiert an einer Stelle definiert werden. Dies verhindert weitere Redundanz und verringert damit die Fehleranfälligkeit für unser Projekt.

Ein Partialfile unterscheidet sich einfach durch einen Unterstrich _ am Anfang des Dateinamens. Dadurch weiß unser Sass Processor dass es sich um ein Partialfile handelt und dafür keine extra CSS Datei angelegt werden muss.

Mithilfe des Import Befehls können diese Partial Dateien dann an die notwendigen Stellen geladen werden. Sehen wir uns ein Beispiel an.

Zuerst befüllen wir die Datei _colors.scss mit den Variablendeklarationen:

Diese können wir ab sofort in jeder Datei verwenden importieren und dann verwenden. Beispielsweise eine header.scss:

Wie wir sehen müssen wir weder den Unterstrich noch die Dateiendung angeben, der Sass Processor erkennt automatisch die richtige Datei und importiert diese.

 

Mixins

Mixins sind ein weiteres mächtiges Tool das Sass uns zur Verfügung stellt. Wir können sie uns ein wenig wie Funktionen vorstellen. Wir definieren an einer Stelle im Code ein Mixin mit diversen verfügbaren Variablen und können dieses dann an verschiedenen Stellen im Code aufrufen – jeweils mit anderen Werten.

Dadurch können wir uns einerseits bei Befehlen, die viele browserspezifische Gegenstücke haben (zum Beispiel border-radius), einiges an Arbeit sparen aber auch ein typisches Look and Feel lässt sich damit einfacher kreieren und erhalten.

Wie wir im Beispiel sehen ist die Verwendung von Mixins denkbar einfach. Wir definieren einen Namen, Parameter und den Code der an der entsprechenden Stelle eingefügt werden soll und rufen es danach einfach mit dem @include Befehl auf. Benutzen wir den border-radius öfter sparen wir uns damit viele Zeilen Code und tragen weiter zur Übersichtlichkeit unserer Dateien bei.

Natürlich bietet Sass uns noch mehr Tools und Features und wird auch ständig weiterentwickelt. Trotzdem hoffe ich, dieser kurze Überblick überzeugt euch genau wie mich von der Nützlichkeit der CSS Preprocessors. Hat man einmal damit gearbeitet will man nicht mehr zurück.

Ein Kommentar zu “Sass – Eine Einführung

  1. Danke für diese Einführung! Ich hab aufgrund jahrelanger Erfahrung mit HTML, php und CSS binnen weniger Minuten verstanden, wie ich Sass anwenden kann. Nur der für mich wichtigste Teil ist auch hier noch ein absolutes Rätsel…

    Wie binde ich welche Dateien (ob selbstgeschrieben oder fertig bekommen) wo ein, damit ich die Inhalte schlussendlich als CSS in der Webseite einbinden kann!?

    Was ich davon hier bisher verstanden habe, ist in etwa Folgendes 😀
    Irgendwelche Tools werden benötigt, aber nicht zwangsläufig…. Es müsste eigentlich manuell compiliert werden, geht aber theoretisch auch automatisch…!?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*