SCSS / SASS
Wer bei der Webentwicklung etwas tiefer geht, als nur die zwei Grundlagen HTML & CSS, stösst bald auf die zwei Begriffe «SCSS» und «SASS». Doch, was ist das genau? Für was wird es eingesetzt? Was ist der Unterschied zu CSS? Und wo liegt der Unterschied zwischen den häufig verwechselten Begriffen «SCSS» und «SASS», das habe ich hier zusammengefasst.
Was ist SCSS / SASS?
SCSS und SASS sind Sprachen, die CSS (Cascading style sheets) erweitern. SASS bedeutet ausgeschrieben «Syntactically Awesome Stylesheets», was soviel bedeutet wie grossartiges CSS – und das ist es auch. SASS gibt es seit 2007 und wurde von Hampton Catlin entwickelt.
SASS ist ein CSS-Präprozessor, was soviel bedeutet, dass es CSS zwar vereinfacht und mit vielen Funktionen erweitert, jedoch muss SCSS und SASS schlussendlich immer wieder in CSS zurückkompiliert werden, da der Browser nur CSS interpretieren und verstehen kann. Dafür braucht man einen sogenannten «SASS-Compiler», der die SASS-Sprache in normales CSS kompiliert. Solche Compiler gibt es auf allen Plattformen und Betriebssystemen; beispielsweise als Plugins für die meistens Code-Editoren oder auch, wie es professionell in einer Entwicklungsumgebung verwendet wird, als npm-package. Mit einem Build-System wie Gulp kann man die Kompilierung anschliessend automatisieren und dabei die Dateien auch beispielsweise minimiereren etc.
Was sind die Vorteile von SCSS / SASS?
Im Vergleich zu CSS hat man bei SASS viel mehr Funktionen wie beispielsweise Variabeln, Schleifen, Mixins oder Imports. Ebenfalls wichtig, es gibt Verschachtelung. Dies ist besonders bei grösseren und komplexeren Projekten extrem hilfreich und wichtig. So vermeidet man, dass man Klassen mehrmals schreiben muss. Auch bei Media Queries hat man bei SASS einen eindeutigen Vorteil. Während man bei CSS alle Klassen und Elemente in der Media Query nochmals erwähnen muss und somit doppelt schreibt, kann man wie im unteren Beispiel die Media Queries per Mixins definieren und so direkt in das Element schreiben. Diese Methode ist praktisch und ebenfalls sehr dynamisch, denn bei einer Änderung an den Media Queries muss man nur diesen einen Wert anpassen.
Ein kurzes Beispiel
@import "globals";
body {
font-size: 16px;
padding-top: set-prop($grid,gutter)/2;
background-color: set-color(neutral,10);
background-image: none;
color: set-color(neutral,30);
include mq(large) {
padding-top: 0;
}
}
.layout-fullwidth {
&:last-child {
padding-bottom: 30px;
}
}
Die Syntax sieht sehr ähnlich aus, und trotzdem gibt es viele kleine Unterschiede. Hier beispielsweise werden zwei Funktionen verwendet: "set-prop" und "set-color". Diese Funktionen sind nicht Standard von SASS, sondern wurden selbst definiert und werden hier am Anfang der Datei durch "@import", importiert. In diesen Funktionen kann je nachdem, wie viele Parameter bei der Funktion konfiguriert wurden, unterschiedlich viele Parameter mitgegeben werden. Ähnlich wie beispielsweise bei JavaScript.
Danach wird hier ein Mixin verwendet; so werden bei uns die Media Queries geschrieben. Anstatt, dass man wie bei CSS jedes Mal die ganze Media Query schreiben muss und auch die Einheit bei einer Änderung jedes Mal wieder überall anpassen müsste, kann man hier mit dem von uns vordefinierten Mixin "mq" (für Media Query) einfach "large" als Parameter mitgeben und SCSS kompiliert dies anschliessend in die korrekte Media Query mit der bei "large" definierten Grösse.
Als Drittes sehen wir noch die Verschachtelungsfunktionen von SCSS. Nicht nur, dass man Klassen, die sich in anderen Klassen befinden ineinander schreiben kann ist praktisch, sondern auch, dass man Pseudoklassen wie ":hover" oder ":last-child" einfach in die Klasse schreiben kann, ohne, dass man die Klasse noch einmal schreiben muss. Das &-Zeichen bedeutet so viel wie, hänge die Klasse oder das Element, in welchem es verschachtelt ist, vorne dran. Dies ist auch bei BEM sehr praktisch und bleibt so dynamisch; so kann man die Elemente und die Modifier einfach in der Klasse vom Block verschachteln und das "&"-Zeichen verwenden.
Ist SCSS und SASS nicht das Gleiche?
Nein! Aber die zwei Sprachen werden extrem häufig verwechselt. SASS ist auf YAML angelehnt und SCSS hat sich später daraus entwickelt und ist heute auch mehr verbreitet. Der Unterschied ist nicht gross, aber trotzdem wichtig. Die Funktionen von SCSS und SASS sind genau dieselben, jedoch ist die Syntax anders. Bei SASS werden keine Klammern und Semikolons geschrieben, bei SCSS hingegen schon. Darum ähnelt SCSS aus mehr dem normalen CSS und ist deutlich übersichtlicher.
Was ist der Unterschied von SCSS / SASS zu normalem CSS?
Wie bereits ausführlich erklärt, hat SCSS / SASS viele Vorteile und Zusatzfunktionen, die normales CSS nicht mitliefert. Gerade bei grossen und Komplexen Projekten sind diese extrem wichtig. Möchte man beispielsweise eine Media Query ändern, muss man dies nur in den globalen Meda Query Einstellungen machen und alle Dateien, die diese Funktion importieren übernehmen automatisch die neuen Grössen.
Wichtig zu wissen ist aber, dass die Browser, welche schlussendlich die Webseiten anzeigen, nur CSS verstehen. Das heisst, um SCSS / SASS zu verwenden, braucht man am Ende immer einen Compiler, der die Sprache ins "normale" CSS kompiliert.