SASS (SCSS) vs. LESS

Was ist SASS?

Bevor Du verstehen kannst was SASS ist, musst Du CSS zumindest schon mal gehört haben. Grundsätzlich werden Webseiten in der Aufzeichnungssprache HTML geschrieben. Demnach hängt jede Änderung des Designs der Webseite auch mit dem HTML-Code der Seite zusammen. Das sogenannte CSS – Cascading Style Sheet – ist für die Darstellung der einzelnen HTML-Seiten zuständig und fungiert als eine Art Schablone für Design, Hintergrund, Textfarbe, …

Das bedeutet, wenn Schriftart und Schriftgröße einer Webseite geändert werden, werden diese Änderungen in separaten Dateien gespeichert und untergebracht, auf welche die einzelnen HTML-Seiten jeweils verweisen. Folglich spart das viel Zeit und Nerven und verkürzt zudem die Angaben der einzelnen Seiten.

Kommen wir nun zu SASS: Wo CSS an seine Grenzen stößt, dort eilt SASS zur Hilfe und vereinfacht die Arbeit beim Erstellen des Designs. SASS ist zwar wesentlich fortgeschrittener als CSS, hat aber den Nachteil, dass nicht jeder Browser mit dieser Sprache kompatibel ist. Aus diesem Grund wird SASS als Präprozessor bezeichnet. Das bedeutet, dass ein beliebiges SASS-Dokument zuerst in CSS umgewandelt werden muss, bevor es dem Quellcode der Webseite ausgeliefert werden kann.

Wofür brauche ich SASS?

CSS wie wir es alle kennen, reicht grundsätzlich vollkommen aus, keine Frage. Selbst wenn Du anfängst mit SASS zu arbeiten, kannst Du die Verwendung von CSS nicht umgehen – SASS stützt sich letztendlich auf CSS ab. SASS kann allerdings einiges, wozu CSS allein nicht in der Lage ist:

Funktionen: Mit SASS lassen sich mit diversen Funktionen beispielsweise Farbewerte und Listen anpassen und analysieren. Zudem können auch mathematische Operatoren (+,-,*,/,%) verwendet werden.

Variablen: SASS ermöglicht die Abspeicherung von Informationen in Variablen, um sie zu einem späteren Zeitpunkt wiedergeben zu können.

scss content width
Variablen in SCSS

Loops & Fallunterscheidungen: Ähnlich wie bei Python und Co. lassen sich bei SASS im Gegensatz zum reinen CSS, Schleifen und if-else-Entscheidungen integrieren.

Strukturierung und Verschachtelung: Um den Code in SASS einfacher darzustellen, werden Einrückungen und Zeilenumbrüche verwendet. Demnach sind beispielsweise keine Klammern nötig, um Verschachtelungen anzuzeigen. Apropos „Verschachtelungen“ – was CSS allein nicht zulässt, ermöglicht SASS und kann dadurch auf lange Sicht den Schreibaufwand verringern.

Vererbung: Auch Vererbungen werden durch SASS möglich, was folglich viel Schreibarbeit erspart. Einer der großen Vorteile von SASS neben der Erweiterung von/für CSS ist, dass es bereits eine Vielzahl an hilfreichen Frameworks / Bibliotheken wie Bourbon oder Compass gibt. Diese helfen dir enorm weiter bei der Gestaltung Deiner Webseite und nehmen dir viel Arbeit. So nutzt zum Beispiel LinkedIn Frameworks von Compass.

Aus SASS wird CSS

Um SASS-Code in CSS umzuwandeln muss lediglich ein Kommandozeilenbefehl gegeben werden:

sass beispiel.sass:beispiel.css

Durch diesen Befehl wird die Syntax von SASS direkt an die Regeln von CSS angepasst. Wenn Du Webseiten fortan mit der Hilfe von SASS erstellen möchtest, bietet dir SASS mit dem Parameter „watch“ die Möglichkeit Deine Ordner und Dateien zu überwachen. Laufende Änderungen sollten nun hauptsächlich dort vorgenommen werden, um dann dem System automatisch zugeordnet zu werden.

Und was ist nun SCSS?

SASS besteht aus zwei Syntax – die ursprüngliche Form „SASS“ und die neue Variante, welche sich stärker nach den Vorgaben von CSS richtet – Sassy CSS „SCSS“. Seit SASS 3.0 wurde SCSS als offizielle Syntax festgelegt.

Die wesentlichen Unterschiede – SASS & SCSS

Der größte Unterschied besteht in der Verwendung von Klammern und Semikolons. SASS-Syntax arbeitet mit Einrückungen und Zeilenumbrüchen – Codezeilen werden abgeschlossen, indem ein Zeilenumbruch (Klick auf die Enter-Taste) gemacht wird. Einrückungen werden mit dem Tabulator vorgenommen. Durch diese Einrückungen und Umbrüche werden sogenannte Deklarationsblöcke gebildet. Bei CSS allein funktioniert diese Eigenschaftsdeklaration nicht, ebenso wenig bei SCSS. Hier müssen nämlich Klammern und Semikolons dafür verwendet werden.

Im Laufe der Jahre haben sich zwei Lager gebildet: Die Einen die die einfachere Handhabung von SASS befürworten und die Anderen, die den Mehraufwand von SCSS gerne in Kauf nehmen, da SCSS mehr dem ursprünglichen CSS ähnelt.

Letztendlich spielt es aber keine Rolle, für welche Syntax Du Dich entscheidest, da Du mit beiden Syntax dieselben Resultate erreichen kannst.

Was sind die Vor- und Nachteile von SASS?

Die wesentlichen Vorteile sind klar – SASS spart eine Menge Zeit und Nerven und hält den Code schlank. Zudem werden Änderungen nur zentral vorgenommen und müssen nicht an vielen Stellen einzeln gesucht werden. Die wesentlichen Nachteile liegen ebenfalls auf der Hand – der erstellte Code muss zunächst immer kompiliert werden. Demnach muss, bevor Anpassungen vorgenommen werden, alles zuerst in CSS übersetzt werden. Hierbei entstehen oft Fehler, welche dann wiederum nur schwer wieder richtiggestellt werden können. Auch der Lernaufwand, um die Sprache richtig beherrschen zu können ist hoch, demnach solltest Du unbedingt Zeit dafür haben.

Vor- und Nachteile in Tabellenform:

VorteileNachteile
Umfangreiche FrameworksCode muss vor jeder Änderung kompiliert werden.
Übersichtlicher CodeDebugging wird erschwert
Mehr Features im Gegensatz zu CSSHöherer Lernaufwand für Einsteiger

Was ist LESS?

LESS – Leander Style Sheets – ist wie SASS eine Stylesheet-Sprache, nur orientiert sie sich stärker an CSS und ähnelt demnach der Syntax von SCSS. SASS und LESS sind sich aber sonst grundsätzlich sehr ähnlich. Auch in den Frameworks gibt es kaum Unterschiede, so arbeitet beispielsweise Twitter mit LESS.

SASS vs. LESS Präprozessoren – Unterschiede

Einige Unterscheide gibt es aber nun doch. Folglich haben wir Dir die 5 größten Unterschiede aufgelistet. Bedenke, dass sich im Funktionsumfang keiner der beiden Präprozessoren vorteilhafter als der andere erweist.

Less oder Sass – was sollte man nutzen? (englisch)

SASS in Ruby, LESS in Javascript

Der wesentliche Unterschied besteht darin, dass SASS auf Ruby und LESS auf Javascript basiert. LESS ist für die Installation am Mac einfach und unkompliziert, für Windows hingegen dauert sie länger. Fun-Fact: LESS wurde wie SASS auf Ruby konstruiert, später allerdings auf Javascript portiert. Für LESS musst Du somit die JS-Dateien auf den Server hochladen oder die CSS-Blätter über einen Offline-Compiler kompilieren.

Um Variablen zuzuweisen, verwendet SASS „$“, während LESS „@“ verwendet.

Der Vorteil von Präprozessoren ist jener, dass Du nicht jedes Mal, wenn Du Variablen zuweisen möchtest, erneut Spezifikationen eingeben musst. Stattdessen musst Du einfach nur das jeweilige Zeichen eingeben. SASS verwendet hierfür „$“, LESS hingegen „@“. LESS hat dadurch einen kleinen Nachteil, da einige CSS-Selektoren schon bereits „@“ verwenden. Ist grundsätzlich nicht weiter schlimm, das Erlernen der Sprache kann dadurch nur ein wenig länger dauern.

SASS hat einen Compass, während LESS einen Preboot hat

Beide, SASS und LESS verfügen über Erweiterungen zur Integration von Mixins. Mixins sind Möglichkeiten, CSS-Deklarationen auf der gesamten Webseite abzuspeichern und gemeinsam nutzen zu können. LESS verwendet „Preboot“ wohingegen SASS „Compass“ benutzt. Zudem ist der Software-Support von LESS stärker fragmentiert als jener von SASS.

LESS hat bessere „Error-Messages“ als SASS

LESS kann nicht nur besser Fehler finden, sondern gibt sie auch exakt an, was vor allem bei „blöden“ Tippfehlern sehr nützlich sein kann. Demnach lassen sich auch Probleme mit LESS schneller lösen als in SASS.

LESS hat eine benutzerfreundlichere Dokumentation als SASS

LESS ist von der UX her, vor allem für Erstnutzer, benutzerfreundlicher als SASS.

Fazit Vergleich

Vom Kerngedanken sind beide Präprozessoren gleich und verrichten auch dieselbe Arbeit. Kleine Unterschiede gibt es jedoch sehrwohl, allerdings sind sie überschaubar. Welche Stylesheet Sprache Du letztendlich benutzt bleibt Dir überlassen – beide erfüllen denselben Zweck und bringen dieselben Resultate mit sich.

Hinterlasse eine Anmerkung

Datenschutz
Lightweb-media Burghardt, Besitzer: Joel Burghardt (Firmensitz: Deutschland), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.
Datenschutz
Lightweb-media Burghardt, Besitzer: Joel Burghardt (Firmensitz: Deutschland), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.