kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Einstieg in Sass – Funktionsweise und Überblick

Bei komplexen Websites kann die Übersicht im CSS-Code schnell verloren gehen. Moderne Websites nutzen ein durchdachtes Farbkonzept, basieren auf einem Gestaltungsraster das jede erdenkliche Displaygröße bedienen kann, und werden zunehmend interaktiv. Eine stark fragmentierte Browserlandschaft und verschiedene Bedienkonzepte machen die Arbeit zusätzlich kompliziert. Die Reaktion auf diese veränderten Anforderungen ist der »neue« Webdesign-Workflow, den ich in einigen Artikeln bereits ausführlich behandelt habe.
In diesem Artikel möchte ich euch Sass vorstellen. Sass hilft euch dabei, Stylesheets schneller zu schreiben und moderne oder experimentelle Techniken unkompliziert und browserübergreifend einzusetzen. Sass automatisiert lästige Aufgaben, vereinfacht den Umgang mit Farben und Gestaltungsrastern und bietet diverse Funktionen von denen ihr in CSS nur träumen könnt.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Sass existiert bereits seit einigen Jahren, hat in der jüngeren Vergangenheit allerdings stark an Popularität gewonnen. Das liegt auch daran, dass Sass deutlich weiterentwickelt wurde. Früher war ein solides Verständnis der Kommandozeile beispielsweise Pflicht um mit Sass effektiv arbeiten zu können. Das ist heute nicht mehr der Fall. Diverse Tools und Desktop-Anwendungen ermöglichen es euch Sass einzusetzen ohne die Kommandozeile zu sehen.

Vorteile von Präprozessoren allgemein

Sass ist ein CSS-Präprozessor (engl. CSS-Preprocessor). Präprozessoren erleichtern das Schreiben von Code, indem sie eine vereinfachte oder bessere Syntax bereitstellen als die Programmiersprache selbst, lästige Aufgaben automatisieren und neue Funktionen bieten. Neben CSS-Präprozessoren wie Sass, existieren auch Präprozessoren für HTML (z. B. HAML) oder für JavaScript (z. B. CoffeeScript).

CSS-Präprozessoren bieten in diesem Zusammenhang u. a. folgende Vorteile:

  1. Sie vereinfachen die Syntax, damit ihr Stylesheets schneller schreiben könnt.
  2. Sie helfen euch dabei ein Projekt zu organisieren und in verständliche Sinnabschnitte zu unterteilen.
  3. Sie erlauben Variablen, übernehmen die Berechnung von Layout-Abmessungen, generierten Farbsets uvwm.
  4. Sie reduzieren die Anzahl von HTTP-Requests, da Stylesheets kombiniert werden können.
  5. Sie automatisieren lästige Arbeitsabläufe wie die Kompression von Dateien oder Stylesheets.
Website von SassMeister
Auf der Website von SassMeister könnt ihr online Sass-Code schreiben und in CSS umwandeln lassen

Vorteile von Sass gegenüber anderen CSS-Präprozessoren

Ich bin kein Freund davon ein Tool als das einzig brauchbare, und alle vergleichbaren Tools als weniger geeignet zu bezeichnen. In vielen Fällen ist es Geschmacksache oder die Wahl des Tools ist abhängig vom jeweiligen Projekt, von der Agentur, vom Team etc. Wenn ihr mit einem Hilfsmittel gut und schnell arbeiten könnt, ohne Abstriche bei der Qualität eurer Website machen zu müssen, nutzt dieses Tool.

Wenn man die populären CSS-Präprozessoren vergleicht, stellt man fest, dass die meisten Dinge in allen Präprozessoren ähnlich funktionieren. Die wirklich entscheidenden Unterschiede stellen sich erst bei fortgeschrittener Nutzung heraus. Dennoch möchte ich einige Vorteile von Sass gegenüber anderen CSS-Präprozessoren wie LESS, Stylus, Myth etc. herausstellen:

  • Sass ist GPL-kompatibel und unter MIT lizensiert
  • Sass ist abwärtskompatibel mit allen CSS-Versionen – zumindest in der SCSS-Syntax (dazu später mehr)
  • Sass unterstützt komplexere Logiken wie if-else-Bedingungen, while, for oder each-Schleifen
  • Sass ist – nach meiner Einschätzung – am populärsten, hat die größte Community und ist der zukunftssicherste CSS-Präprozessor

Vorurteile gegenüber Sass

Die meisten Webdesigner haben bereits schon einmal von Sass gehört. Viele Designer haben jedoch Angst vor der neuen Technologie oder sie haben Vorurteile aufgebaut, die sie daran hindern Sass aktiv einzusetzen. Die verschiedenen Buzzwords im Umfeld von Sass machen den Einstieg auch nicht unbedingt einfacher. Wenn ich mit Webdesignern über Sass spreche und ihnen erzähle wie praktisch das System ist, erhalte ich häufig Antworten wie diese:

  • Ich habe keine Lust Sass aufwendig auf meinem Computer einzurichten.
  • Ich habe gehört, dass Sass auf Ruby basiert. Muss ich Kenntnisse von Ruby haben?
  • Ich bin Designer! Ich habe keine Lust mit der Kommandozeile zu arbeiten.
  • Ich habe im Projekt-Alltag keine Zeit mir eine neue Code-Schreibweise anzugewöhnen. Sass erfordert doch ein vollständig anders aufgebautes Stylesheet.
  • Müssen alle Änderungen kompiliert werden damit sie im Browser sichtbar sind?
  • Ich schreibe meinen CSS-Code lieber sauber von Hand. Wenn ein Tool diese Aufgabe übernimmt, wird der Code sicherlich unleserlich oder unsauber.

Die gute Nachricht ist, dass alle diese Vorurteile haltlos sind. Wenn ihr mit Sass arbeiten möchtet, müsst ihr weder Ruby beherrschen, noch mit der Kommandozeile arbeiten. Wenn ihr euch allerdings in der Kommandozeile wohl fühlt, könnt ihr sie natürlich nutzen.

Auch euren Coding-Stil müsst ihr nicht verändern, da sich Sass bzw. SCSS (dazu später mehr) nach und nach in euren Workflow integrieren lässt. Und auch die Qualität des Codes oder die Geschwindigkeit eures Workflows gibt keinen Grund zur Beanstandung, im Gegenteil.

Warum Sass und nicht CSS?

In der modernen Programmierung versucht man Änderungen immer nur an einer Stelle vornehmen zu müssen. Diese Vorgehensweise entspricht sowohl dem Templating in HTML, als auch der objektorientierten Programmierung in Programmiersprachen wie PHP. Auch Content Management Systeme sind häufig nach dem sog. DRY-Prinzip (Don’t repeat yourself) aufgebaut und arbeiten mit Modulen.

CSS hingegen zwingt uns dazu unzählige Wiederholungen im Code einzubauen. Wenn die Hausfarbe unseres Unternehmens Blau ist und wir möchten die Überschriften, die Links und die Buttons unserer Website in diesem Blau gestalten, dann bleibt uns kaum etwas anderes übrig als allen Elementen den gleichen Farbcode zuzuweisen. Wenn sich die Farbe ändert, müssen wir alle Code-Passagen anpassen. Diese Arbeitsweise ist nicht effektiv und führt leicht zu Fehlern.

Unser Ziel ist es, Wiederholungen im CSS-Code weitestgehend zu vermeiden, das Stylesheet also DRYer zu machen.

Was ist Sass bzw. SCSS?

Sass steht für »Syntactically Awesome Stylesheets« und ist ein CSS-Präprozessor. Ein CSS-Präprozessor ist eine weitere Ebene zwischen dem Stylesheet, das geschrieben wird und dem Stylesheet, das letztendlich dem Browser zur Interpretation vorgelegt wird.

Funktionsweise von Sass
Funktionsweise von Sass

Geschrieben wird heute meist ein *.scss (Sassy CSS)-Dokument. Dieses Stylesheet lässt sich sehr einfach verwalten und ermöglicht es uns bislang nicht verfügbare Funktionen zu nutzen. Mit Hilfe von Sass wird es in ein normales CSS-Dokument umgewandelt (kompiliert, engl. compiled). Dieses normale CSS-Dokument wird dann auf dem Server eingesetzt, da der Browser nur CSS interpretieren kann, nicht aber Sass oder andere Präprozessoren.

Die Website von Sass beschreibt den Präprozessor mit folgenden Sätzen:

CSS with superpowers

Die ausführliche und sachliche Version lautet:

Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.

Sass kann als Erweiterung von CSS3 verstanden werden. Das bedeutet automatisch, dass jedes valide CSS3-Dokument auch ein valides *.scss-Dokument ist. Diese Tatsache erlaubt es euch, Sass nach und nach in euren Workflow zu integrieren, da CSS immer auch SCSS ist. Nehmt einfach ein bestehendes CSS-Dokument und ändert die Dateiendung von *.css auf *.scss. Ihr habt nun ein voll funktionsfähiges SCSS-Dokument erstellt.

Die Sass-Syntax

Es existieren zwei Schreibweisen: SASS und SCSS. Die neuere Schreibweise ist die SCSS-Syntax. Diese Syntax hat verschiedene Vorteile, u. a. die automatische Kompatibilität von CSS-Dokumenten und die damit verbundene unkomplizierte Einarbeitung in Sass bzw. die stückweise Umwandlung von CSS-Dokumenten in SCSS-Dokumente.

Die SASS-Syntax hingegen hat den Vorteil, dass sie noch stärker reduziert ist. Es wird u. a. auf die Semikola am Ende einer Zeile und auf geschwungene Klammern verzichtet. Verschachtelungen werden mit Einrückungen erreicht, weshalb die Schreibweise auch als »Indented Syntax« bezeichnet wird. Diese Reduzierung hat aber den Nachteil, dass ein bestehendes CSS-Dokument nicht automatisch ein valides SASS-Dokument ist. Das generierte CSS-Dokument ist jedoch bei beiden Schreibweisen identisch.

Die nachfolgenden Beispiele von Variablen zeigen den Unterschied der beiden Schreibweisen.

SCSS-Syntax

$pink: #ff007e;
 
p {
  color: $pink;
}

generiert folgenden CSS-Code:

p {color: #ff007e;} 

SASS-Syntax

$pink: #ff007e
 
p
  color: $pink  

generiert ebenfalls:

p {color: #ff007e;} 

Fazit

Ihr wisst nun wie CSS-Präprozessoren arbeiten, und kennt den Unterschied zwischen Sass und SCSS. In weiteren Beiträgen dieser Artikelserie widmen wir uns der Installation von Sass auf dem Computer, sowie den verschiedenen Sass-Funktionen.

Dieser Beitrag ist ein Auszug aus unserem eBook zum Thema Sass.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

17 Kommentare

  1. Carsten

    Verfasst am 26. Mai 2014 um 20:14 Uhr.

    Danke für den Einstieg. Zwei Fragen dazu:

    »Dieses Stylesheet lässt sich sehr einfach verwalten und ermöglicht es uns bislang nicht verfügbare Funktionen zu nutzen.«

    Heißt das, SCSS lässt sich einfacher als SASS verwalten und welche Funktionen bietet es, die SASS nicht bietet?

    2. Frage: Ich hadere mit Präprozessoren, weil es verschiedene gibt. Die Entscheidung zwischen LESS und SASS fällt zum Beispiel recht schwer. Sind bei beiden die gleichen Möglichkeiten gegeben?

    • Jonas Hellwig

      Verfasst am 26. Mai 2014 um 20:44 Uhr.

      Hallo Carsten, SASS und SCSS unterscheiden sich nur in der Syntax. Vom Funktionsumfang sind beide Varianten identisch, auch das kompilierte Ergebnis ist identisch. Die SCSS-Syntax hat den Vorteil, dass sie kompatibel zu »normalem« CSS ist, daher wird häufiger SCSS geschrieben.

      Die Unterschiede von Sass zu anderen Präprozessoren habe ich im Artikel soeben ergänzt. Bei Less unterscheidet sich u.a. die Installation. In der tagtäglichen Handhabung sind die meisten Funktionen identisch, allerdings bietet Sass einige komplexe Logiken und Schleifen die – soweit ich informiert bin – in Less (noch?) nicht möglich sind.

      • Carsten

        Verfasst am 26. Mai 2014 um 20:56 Uhr.

        Danke für die schnelle Antwort und die Ergänzung im Artikel. Hat mir sehr geholfen.

        Dann werde ich meinen Einstieg in SASS/SCSS wohl doch wagen. Und dieser Artikelserie folgen.

  2. Stefan

    Verfasst am 28. Mai 2014 um 13:35 Uhr.

    Super Beitrag! Ich habe mich in letzter Zeit immer wieder mal gefragt was eigentlich SASS ist.
    Wie aber bindet man das ganze Dokument in eine Webseite ein?

    • Jonas Hellwig

      Verfasst am 28. Mai 2014 um 13:56 Uhr.

      Sass generiert (kompiliert) ein CSS-Dokument. Dieses Dokument wird ganz normal auf dem Server abgelegt.

      • Stefan

        Verfasst am 28. Mai 2014 um 15:32 Uhr.

        Vielen Dank für deine Antwort

  3. Bogdan Gewald

    Verfasst am 29. Mai 2014 um 21:35 Uhr.

    Ich habe dein e-book gekauft. es ist sehr wichtig für mich. danke.

  4. Bogdan Gewald

    Verfasst am 29. Mai 2014 um 21:39 Uhr.

    darf ich deinen Beitrag verlinken auf mein Blog?

  5. Stefan Melz

    Verfasst am 30. Mai 2014 um 9:14 Uhr.

    Eine sehr interessante Alternative könnte auch CSS-Crush sein. Vorteil: Es basiert komplett auf PHP und handhabt einige Sache praktikabler als SASS. Schauts euch an.
    http://the-echoplex.net/csscrush/

  6. Uli Sekat

    Verfasst am 2. Juni 2014 um 18:37 Uhr.

    Danke für das eBook – wie immer top geschrieben und in der alltäglichen Arbeit ein hervorragendes Nachschlagewerk. Mir persönlich gefällt Koala (http://koala-app.com/) von Ethan Lai sehr gut als Compiler. Danke und: mach weiter so!

    • Jonas Hellwig

      Verfasst am 2. Juni 2014 um 19:46 Uhr.

      Hallo Uli, vielen Dank für deinen Kommentar und den Tipp bzgl. Koala. Ich freue mich, dass dir das eBook weitergeholfen hat und als Nachschlagewerk dient.

  7. Michael Schulze

    Verfasst am 2. Juni 2014 um 21:37 Uhr.

    Hi Jonas,
    ich arbeite bereits seit 2 Jahren mit SASS und habe mir das eBook gekauft um es bei Workshops oder in Agenturen empfehlen zu können. Leider werden eBooks nur selten angenommen. Man hat in Unternehmen lieber gedruckte Exemplare, welche sich Mitarbeiter auch mit nach Hause nehmen können. Daher meine Frage: Siehst du eine Möglichkeit, dass dein eBook (später) als gedrucktes Buch erscheint? Praktisch fände ich ein kleineres Format (ca. DIN A5), so wie es bei den „A Book Apart“-Büchern der Fall ist.

    • Jonas Hellwig

      Verfasst am 2. Juni 2014 um 22:16 Uhr.

      Hallo Michael,

      zunächst einmal vielen Dank für den Kauf des eBooks. Ich spiele in der Tat mit dem Gedanken das Buch auch in gedruckter Form zu veröffentlichen. Allerdings muss ich mich dazu erst einmal detailliert über Druck-Techniken, -Kosten, On-Demand-Print etc. informieren. Wenn das Buch in gedruckter Form erscheint, informiere ich darüber im Blog, auf den Social Media Kanälen und im Newsletter.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.