Unterschied zwischen CSS, LESS, SCSS & SASS

Was ist CSS?

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die verwendet wird, um die Darstellung von HTML-Dokumenten im Browser zu gestalten. Es ermöglicht es, die Schriftarten, Farben, Layouts, Größen und vieles mehr von HTML-Elementen festzulegen. Es ermöglicht es auch, Eigenschaften von Elementen zu gruppieren und wiederzuverwenden, um die Wartbarkeit und Wiederverwendbarkeit des Codes zu erhöhen. Der Code in CSS ist übersichtlich und einfach zu lesen, da die Syntax relativ einfach ist.

.container {
    width: 100%;
    height: auto;
    background-color: blue;
}

.box {
    width: 50%;
    height: 200px;
    margin: 10px;
    float: left;
}

:root {
  --red-color: blue;
}

.box {
  color: var(--blue-color);
}

Was ist SCSS?

SCSS (Sassy CSS) ist eine erweiterte Syntax für CSS (Cascading Style Sheets), die von Programmierern verwendet wird, um ihre CSS-Codebasis zu organisieren und zu verwalten. Es ermöglicht es, Variablen, Funktionen, Mixins und vieles mehr zu verwenden, was die Wartbarkeit und Wiederverwendbarkeit des Codes erhöht. SCSS-Dateien müssen kompiliert werden, um in reguläres CSS umgewandelt zu werden, bevor sie im Browser geladen werden können. Es gibt mehrere Werkzeuge und Compiler, die verwendet werden können, um diesen Prozess durchzuführen, wie z.B. node-sass, dart-sass und sass. SCSS ist sehr ähnlich zu SASS, dem es vorausgegangen ist, aber hat eine Syntax die näher an CSS ist, was es leichter macht für Entwickler die schon mit CSS gearbeitet haben um schnell damit anzufangen.

$main-color: blue;

.container {
    width: 100%;
    height: auto;
    background-color: $main-color;

    .box {
        width: 50%;
        height: 200px;
        margin: 10px;
        float: left;
    }
}

Was ist SASS?

Bevor Du verstehen kannst was SASS (Syntactically Awesome Style Sheets) 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.

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.

$main-color: blue

.container
    width: 100%
    height: auto
    background-color: $main-color

    .box
        width: 50%
        height: 200px
        margin: 10px
        float: left

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.

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.

// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;

// Small tablets (portrait view)
$screen-md-min: 768px;

// Tablets and small desktops
$screen-lg-min: 992px;

// Large tablets and desktops
$screen-xl-min: 1200px;

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.

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:

Was ist LESS?

LESS (Leaner 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.

@main-color: blue;

.container {
    width: 100%;
    height: auto;
    background-color: @main-color;

    .box {
        width: 50%;
        height: 200px;
        margin: 10px;
        float: left;
    }
}

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.

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 aus SASS, SCSS und LESS

In diesem Beitrag haben wir die Unterschiede zwischen den drei populären CSS-Präprozessoren SASS, SCSS und LESS untersucht. Wir haben festgestellt, dass alle drei Werkzeuge ähnliche Funktionen bieten, wie die Verwendung von Variablen, Funktionen, Mixins und Nesting, um die Wartbarkeit und Wiederverwendbarkeit des Codes zu erhöhen. Der größte Unterschied zwischen den drei ist die Syntax. SASS verwendet eine eigene Syntax, bei der Klammern und Semikolons weggelassen werden, während SCSS die Syntax von CSS ähnelt und dadurch leichter zu lesen und zu verstehen ist. LESS hingegen hat eine ähnliche Syntax wie SCSS, aber es unterstützt auch die Verwendung von JavaScript. Letztendlich hängt die Wahl des richtigen Werkzeugs von den persönlichen Präferenzen und Anforderungen des Entwicklers ab.