Lerne Coding
Wie kannst du einfacher CSS mit SASS & SCSS schreiben?
29.10.2019
TL;DR »Too long; didn't read«
  • Erweiterte CSS-Funktionalitäten: SASS/SCSS bietet zusätzliche Features wie Variablen, Verschachtelung und Mixins, die den Code effizienter und strukturierter machen.
  • Code-Reduktion durch das DRY-Prinzip: Mit SASS/SCSS wird das "Don't Repeat Yourself"-Prinzip gefördert, wodurch redundante Code-Wiederholungen vermieden und die Wartbarkeit verbessert werden.
  • Einrichtung und Compiler erforderlich: Um SASS/SCSS nutzen zu können, ist ein Compiler notwendig, da Browser diese Sprachen nicht direkt unterstützen.

CSS-Präprozessor: SASS und SCSS erklärte!

Inhaltsverzeichnis
[[TABLE OF CONTENTS]]
access_timeGeschätzte Lesezeit ca. Minuten

SCSS und SASS sind Stylesheet-Sprachen, die deutlich mehr Funktionen als CSS haben. Einen Nachteil bildet allerdings die Einrichtung, weshalb es schwieriger ist, mit SASS oder SCSS loszulegen als mit CSS. SASS ist ein CSS-Präprozessor, das heißt, eine SASS- bzw. SCSS-Datei wird durch den SASS Compiler in eine CSS-Datei kompiliert.

Die Abkürzung SASS steht für Syntactically Awesome Style Sheets, und das mag auch stimmen; ich zumindest habe die Vorzüge von SCSS für mich lieben gelernt. "CSS with superpowers". So beschreibt sich SASS selbst - und das stimmt auch! Warum das so ist, erläutere ich euch im Artikel.

Die Syntax im Vergleich

Als erstes zeige ich euch einmal drei Beispiele der verschiedenen Syntax, um ein div mit der Klasse Teaser und einer h1 dort drin anzusprechen, der Hintergrund soll rot eingefärbt werden. Zusätzlich haben wir einen Button, der ebenfalls rot werden soll.

SCSS
div.teaser{
  h1,button{
    background: red;
  }
}
SASS
div.teaser
    h1,button
        background: red

Beide Varianten, sowohl die SASS- als auch die SCSS-Schreibweise, ergeben in der kompilierten Variante den folgenden, unten stehenden Code in CSS.

Es wird euch sicherlich ein Unterschied auffallen. Aber lasst es mich einmal in Zahlen ausdrücken: Die SCSS-Schreibweise braucht 38 Zeichen, die SASS-Variante benötigt 33, die CSS-Schreibweise braucht 46 Zeichen. Die Unterschiede mögen sich hier noch im Rahmen halten, aber bei einem 10.000-Zeilen-Dokument in CSS, was durchaus nicht selten vorkommen kann, ist das eine deutliche Ersparnis an Zeichen.

CSS

div.teaser h1,div.teaser button{
	background: red;
}
Don't Repeat yourself.

Ein wichtiger Grund für SASS bzw SCSS ist das DRY-Prinzip, auch ausgeschrieben als "Don't Repeat Yourself". Das sagt aus, es sollen Redundanzen im Code vermieden werden, möglichst auf keine einzige Redundanz reduziert. Es einmal zu schreiben reicht völlig aus.

Was ist SCSS?

SCSS ist für das Umsteigen von CSS deutlich einfacher als die Verwendung als SASS, da eine CSS-Datei immer auch als SCSS-Datei verwendet werden kann, nicht aber als SASS-Datei.

Was ist SASS?

Der Vorteil von SASS, den man aber gegebenenfalls auch als Nachteil auslegen kann, ist die Schreibweise ohne geschweifte Klammern und ohne Semikolon. Das ist auf der einen Seite eine deutliche Zeicheneinsparung, andererseits geben diese Zeichen auch eine sehr gute Orientierung darüber, wo man sich im Dokument befindet, was bei SASS folglich nicht der Fall ist.

Kann mein Browser Sass Darstellen?

Nein, dein Browser kann SASS nicht darstellen. Dazu benötigst du einen Compiler, der deine SASS-Datei in eine CSS-Datei kompiliert.

Ich möchte noch kurz die Möglichkeit erwähnen, dass ihr auch SASS Files durch eine Javascript-Bibilothek kompilieren könnt. Dieses on-the-fly-Verfahren hat mehr Nachteile als Vorteile: Die Probleme sind, dass der Nutzer Javascript aktiviert haben muss. Des Weiteren sieht er die Seite immer kurz ohne Styling, was natürlich nicht sonderlich schön ist!

Github Logomedialize/sass.js
1.196 30 135

Sass.js - API for emscripted libsass to run in the browser

Was kann SCSS bzw SASS?

  • Nesting (zu deutsch: Verschachtelung): Wie oben im Beispiel, eine der Hauptgründe für Code-Ersparnis und arbeiten nach dem Dry-Prinzip.
  • Variablen sind ein weiterer wesentlicher Grund, wobei inzwischen es auch möglich ist, über CSS Variablen zu arbeiten. Diese haben den Vorteil, dass sie auch später noch über JavaScript manipuliert werden können.
  • Es können mehrere SASS-Dateien nacheinander importiert und zu einer CSS-Datei kompiliert werden. So können auch größere Webseiten und Anwendungen gut strukturiert bearbeitet werden.
  • Mixins; diese Funktionen von SASS ermöglichen es euch, sich immer wiederholende Eigenschaften oder aufwändigere CSS-Klassen mit berechneten Parametern angepasst immer wieder anzulegen und zu verwenden.
  • Placeholder Selektor %: Mit diesem Selektor habt ihr die Möglichkeit, Eigenschaften zu definieren und diese dann mittels @extend %placeholdername eurem Element zuzuweisen. So könnt ihr den gleichen Code öfters wiederholen.
  • Die Grundrechenarten sind auch möglich.
  • Ihr könnt Maps (eine Art von Arrays) erstellen. Ihr habt viele integrierte Funktionen und könnt "if"-Abfragen und Loops schreiben. Sehr nützlich für die Generierung von Grids!
  • Auf der Seite von Sass Lang findet ihr die gesamte Dokumentation und weiterführende Informationen zu den genannten Funktionen.

Was brauche ich für SASS & SCSS?

Um SASS oder SCSS schreiben zu können, benötigst du einen Code-Editor und einen Compiler. Manche Editoren können über Plugins SASS schreiben.

Ich kann dir die beiden folgenden Editoren empfehlen, beide sind kostenlos. Unterschiede liegen im Umfang. Bei dem einen handelt es sich um Visual Studio Code, der andere heißt Brackets.

Brackets der Editor für Anfänger

Brackets von Adobe ist sehr gut für Anfänger geeignet. Es muss nur ein Plugin installiert werden und SASS oder SCSS können kompiliert werden. Das Plugin heißt "Brackets SASS" und muss aktiviert werden. Ihr habt nun eine sehr gute Live Preview eurer Änderungen in einem Browserfenster. Ich würde Brackets als primär für Anfänger / kleine Projekte sehr gut geeignet beschreiben. Bei größeren Projekten mit vielen Dateien kann die Performance leiden.

Für eine ausführliche Installationsanleitung für Brackets + SASS und Konfiguration kann ich euch diesen Blogeintrag empfehlen: http://harikrishkk.blogspot.com/2016/01/brackets-sass-plugin-setup.html

Die offiziele Seite von Brackets ist http://brackets.io/. Brackets ist für MacOs, Linux und Windows verfügbar.

Visual Studio Code - Für Anfänger und Fortgeschrittene

Visual Studio Code von Microsoft ist für Anfänger und Fortgeschrittene sehr gut geeignet, da das Programm sehr viele Erweiterungen und Konfigurationsmöglichkeiten über verschiedene Workspaces bietet.

Was bei Visual Studio Code direkt auffällt: Man hat ein ausführliches Feedback, was gerade geschieht. Für Entwickler ist es oft von Vorteil, genauestens über aktuelle Prozesse informiert zu sein.

Visual Studio Code ist für MacOs, Linux und Windows verfügbar.

Die offiziele Webseite von Visual Studio Code ist https://code.visualstudio.com/

Bitte beachtet: Visual Studio ≠ Visual Studio Code. Das sind zwei komplett unterschiedliche Programme!

VSC Live Sass Compiler
VSC Live Sass Compiler
Beispiel Output
Beispiel Output

Gibt es Alternativen zu einem Code-Editor, der SASS kompiliert?

Ja, die gibt es und die sind oft auch sehr gut bzw. noch besser! Es handelt sich hierbei um sogenannte Taskrunner. Diese sind oft für sehr spezifische Konfigurationen gedacht und nicht, um einfach installiert zu werden. Ein Grundverständnis vom Terminal/CMD/Powershell muss allerdings vorhanden sein, um damit arbeiten zu können. Oft ist ein Grundverständnis von Javascript auch nicht schlecht.

Folgende Taskrunner gibt es

Es gibt aber nicht nur Taskrunner, sondern auch ganze Programme nur für das kompilieren von SASS und SCSS; das sind zum Beispiel folgende:

Fazit

In meinem Alltag arbeite ich sehr oft mit SCSS und merke immer wieder, was für eine Zeitersparnis das ist. Ja, es gibt das Problem, dass man sich erstmal seinen Compiler bei neuen Projekten einrichten muss. Mit der Zeit sammelt man sich je nach Methode, die man zum Kompilieren wählt, seine bevorzugten Varianten und richtet sich den SAS-Compiler für einfache Projekte auch in ein paar Minuten korrekt ein.

Ich bevorzuge zur Zeit GULP als Taskrunner. Dort habe ich für mich mein benötigtes Setup eingerichtet und einsatzbereit.

Kommentare zum Artikel

Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zum Artikel "Wie kannst du einfacher CSS mit SASS & SCSS schreiben?"!

Kommentar schreiben

Vom Autor Empfohlen
close