Was ist Sass?

Und weshalb sollte ich es nutzen?

Wenn Du noch neu im Webdesign bist, hast Du vielleicht den Begriff “Sass” bereits gehört. Wenn Du Dir nicht sicher bist, was Sass macht und ob Du es verwenden solltest oder nicht, dann ist dieser Leitfaden für Sass genau richtig für Dich.

Vereinfacht ausgedrückt ist Sass ein CSS-Präprozessor, der spezielle Funktionen wie Variablen, verschachtelte Regeln und Mixins in normales CSS einfügt. Ziel ist es, den Codierungsprozess einfacher und effizienter zu gestalten.

Was ist Sass?

Sass ist wohl die nützlichste aller CSS-Erweiterungen. Sass (Syntactically Awesome Style Sheets) ist eine Erweiterung von CSS, die es Dir ermöglicht, Dinge wie Variablen, verschachtelte Regeln, Inline-Importe und mehr zu verwenden. Sass hilft Dir auch, die Dinge zu organisieren, und ermöglicht es Dir, Stylesheets insgesamt schneller zu erstellen.

Sass ist mit allen Versionen von CSS kompatibel. Die einzige Voraussetzung für die Nutzung ist, dass Du Ruby installiert haben musst. Zugleich solltest Du die Sass Community Guidelines befolgen.

Was sind Merkmale von Sass, was macht Sass aus?

Nachfolgend stellen wir Dir die wesentlichen Merkmale von Sass und die Unterschiede zu CSS vor.

Syntax

Sass enthält zwei Syntaxoptionen:

SCSS (Sassy CSS): Verwendet die Dateiendung.scss und ist vollständig kompatibel mit der CSS-Syntax.

Eingerückt (einfach “Sass” genannt): Verwendet die Dateiendung .sass und Einrückung anstelle von Klammern. Diese Syntax ist nicht vollständig mit der CSS-Syntax kompatibel, aber sie ist schneller zu schreiben.

Beachte dabei, dass Dateien mit dem Befehl sass-convert von einer Syntax in die andere konvertiert werden können.

Variablen

Genau wie Programmiersprachen (auch wenn Sass eine Stylesheet-Sprache ist) erlaubt Sass die Verwendung von Variablen, die Informationen speichern können, die Du in Deinem Stylesheet verwenden kannst. Du kannst beispielsweise einen Farbwert in einer Variablen am Anfang der Datei speichern und diese Variable dann bei der Einstellung der Farbe der einzelnen Elemente verwenden. Auf diese Weise kannst Du die Farben schnell ändern, ohne jede Zeile einzeln bearbeiten zu müssen.

Verschachtelungen

Verschachtelungen sind ein zweischneidiges Schwert. Es ist zwar eine ausgezeichnete Methode zur Reduzierung der Menge an Code, die Du schreiben musst, kann aber auch zu überqualifiziertem CSS führen, wenn es nicht sorgfältig ausgeführt wird. Die Idee ist, Deine CSS-Selektoren so zu verschachteln, dass sie Deine HTML-Hierarchie nachahmen.

Partiale

Partials sind kleinere Sass-Dateien, die in andere Sass-Dateien importiert werden können (siehe nächster Abschnitt). Stelle Dir Partiale als Codeausschnitte vor. Mit diesen Codeausschnitten kann Dein CSS jetzt modular und wartungsfreundlich gestaltet werden. Eine Teildatei wird als solcher bezeichnet, indem man ihn mit einem führenden Unterstrich benennt: _partial.scss.

Importieren

In Verbindung mit Partials (siehe vorheriger Abschnitt) ermöglicht die @import-Anweisung den Import Deiner Teildateien in die aktuelle Datei, um eine einzige CSS-Datei zu erstellen. Achte dabei darauf, wie viele Importe, die Du als HTTP-Request verwendest, für jeden Einzelnen erzeugt werden.

Mixins

Einer der Vorteile der Verwendung von Präprozessoren ist die Fähigkeit, komplexen, langwierigen Code zu übernehmen und zu vereinfachen. Hier kommen Mixins zum Einsatz!

Wenn Du beispielsweise die Herstellerpräfixe einbeziehen musst, kannst Du stattdessen einen Mixin verwenden.

Erweiterung/Vererbung

Die @extend-Direktive wurde als eines der mächtigsten Features von Sass bezeichnet. Nachdem man sie in Aktion gesehen hat, ist klar, warum.

Die Idee ist, dass Du mit dieser Direktive nicht mehrere Klassennamen in Deine HTML-Elemente aufnehmen musst und Deinen Code sauber halten kannst. Deine Selektoren können die Styles anderer Selektoren übernehmen und bei Bedarf leicht erweitert werden.

Operatoren

Die Möglichkeit, Berechnungen in Deinem CSS durchzuführen, ermöglicht Dir viele Funktionen. Du kannst zum Beispiel Pixelwerte in Prozentwerte umwandeln. Du hast Zugriff auf die Standardfunktionen der Mathematik wie Addition, Subtraktion, Multiplikation und Division. Selbstverständlich können diese Funktionen zu komplexen Berechnungen kombiniert werden.

Darüber hinaus enthält Sass einige eingebaute Funktionen, die bei der Manipulation von Zahlen helfen. Hierzu dienen die Funktionen wie percentage(), floor() und round(), um nur einige zu nennen.

Was ist SassScript und wie funktioniert es?

Bisher haben wir Sass als eine Möglichkeit angesehen, CSS zu erstellen. Aber Sass bietet noch viel mehr. Es ist keine ganz vollständige Programmiersprache, es fehlen einige der Konstrukte, die Du von modernen Sprachen kennst. Aber, es bietet einige grundlegende Skripting-Funktionen, einschließlich arithmetischer Operatoren, Ablauf von Steueranweisungen und einige sehr praktische Funktionen.

SassScript ist ein Skript, das es Dir ermöglicht, CSS-Selektor, Eigenschaft oder Wert unter Verwendung des Sass-Ausdrucks zu berechnen.

Wenn Du SassScript verwendest, schreibst Du immer noch CSS. Du hast Zugriff auf die CSS-Erweiterungen, aber verwendest weiterhin die Grundstruktur von CSS:

Syntax: { ; ; ... } 

Das ändert sich nicht. Was sich ändert, ist, dass Du : oder : durch einen Ausdruck ersetzen kannst. Ein Sass-Ausdruck ist eine Kombination von Werten und Operatoren, die der Sass-Transpiler vor der Ausgabe des endgültigen CSS auswertet.

Wenn der Transpiler den folgenden Code sieht:

SCSS: $dark-green: #0f5a0c;  p { color: $dark-green; }

Es wertet die Variable $dark-green aus und ersetzt das Ergebnis, in diesem Fall #0f5a0c, in dem von ihm ausgegebenen CSS:

CSS: p { color: $0f5a0c; }

SassScript-Ausdrücke können jedoch etwas komplexer sein als eine Variable. So können sie ganze Vorgänge beinhalten.

Wie kann ich Sass beim Entwickeln nutzen?

Um Sass unter Windows (Versionen 7/8/10) zu nutzen, musst Du zunächst den Ruby-Installer herunterladen und ausführen.

Ruby ist die Technologie, auf der Sass aufbaut. Also musst Du Ruby zuerst installieren, damit Sass dann darüber laufen kann.

Nach der Installation von Ruby gibst Du im Befehlsfenster ein:

ruby install sass

Damit ist Sass auf Deinem Rechner installiert.

Fazit

Das Schreiben von CSS (Cascading Style Sheets) ist entscheidend, um effektiv zu beschreiben, wie HTML-Elemente auf einer Webseite angezeigt werden müssen, um Styles, Design, Layout und alles, was Du für die Erstellung einer ansprechenden Website benötigst, zu definieren. Aber wenn Du mit großen, komplexen Websites arbeitest, wünschst Du Dir Vereinfachungen bei der Programmierung. Hier kommt Sass ins Spiel und hilft Dir, auch große CSS-Dateien effizient und strukturiert zu erstellen.