Was ist SCSS und SASS
SCSS (Sassy Cascading Style Sheets) kann als erweitertes CSS (Cascading Style Sheets) beschrieben werden, womit das Aussehen von Websites beeinflusst wird. Ein mit SCSS verwandter Begriff ist SASS (Syntactically Awesome Stylesheets). Während die SASS-Syntax mit Einrückungen und ohne die im CSS üblichen geschweiften Klammern und Semikolons auskommt, ist die Syntax von SCSS der von CSS ähnlich. SCSS wird gerne als die modernere Syntax bezeichnet.
Entworfen wurde SASS von Hampton Catlin und von Natalie Weizenbaum entwickelt. Erschienen ist SASS im Jahr 2007.
Eingesetzt wird SASS zum Beispiel vom Frontend-Framework Bootstrap oder vom Open-Source-Shop Shopware 6.
Eigenschaften von SASS
Damit SASS von einem Browser verstanden wird, muss der Code zuerst in CSS konvertiert werden. Deshalb wird SASS als Präprozessor bezeichnet.
SASS bietet im Gegensatz zu CSS verschiedene Funktionen, die das Schreiben von CSS-Anweisungen erleichtern:
Variablen: SASS ermöglicht es Informationen in Variablen zu Speichern und an verschiedenen Stellen wiederzuverwenden. Variablen sind nützlich um zum Beispiel Schriftarten, -grössen, Farben und andere Werte über die ganze Website konsistent einzusetzen.
Verschachtelung: SASS erlaubt das Verschachteln von Klassen und Pseudoklassen, was Redundanz verringert und weniger Schreibaufwand bedeutet. Ferner wird dabei auch die BEM-Methodik1 unterstützt.
Arithmetische Operationen: In SASS lassen sich einfache Berechnungen wie +, -, * und / durchführen.
Flusskontrolle: SASS kennt Schleifen und Fallunterscheidungen womit sich Wiederholungen und Wenn-/Dann-Regeln umsetzen lassen.
Funktionen, Mixins und Extend: Eine @function kann mit Werten gefüttert werden, die sie verarbeitet und schliesslich das Resultat zurückgibt. Ein @mixin funktioniert ähnlich wie eine @function, unterscheidet sich aber dadurch, dass es CSS statt einem Wert zurückliefert. @extend ermöglicht es verschiedenen CSS-Klassen Eigenschaften miteinander zu teilen.
Imports: Die SASS-Befehle @import und @use erlauben es, den Code in Teildateien aufzuteilen, womit sich der Code besser strukturieren und in anderen Zusammenhängen wiederverwenden lässt. Im Gegensatz zum CSS-Import Befehl wird beim Seitenaufruf kein zusätzlicher HTTP-Request erzeugt.
Wie unterscheidet sich SASS zu CSS
SASS bietet, wie oben ausgeführt, zusätzlichen Funktionen, die dabei helfen Redundanz zu reduzieren, Konsistenz zu wahren und Modularität zu ermöglichen. Dies sind alles nützliche Eigenschaften, die mit der Grösse eines Projekts wichtiger werden.
1 BEM ist die Abkürzung für Block Element Modifier. Die Methodik verfolgt das Ziel, die Benennung von CSS-Klassen zu strukturieren. Der Blockname beschreibt den Zweck des Blocks (z.B. suchformular). Das Element ist Teil des Blocks und beschreibt den Zweck eines verschachtelten Elements (z.B. suchformular__input oder suchformular__button). Der Modifier beschreibt die Darstellung (z.B. suchformular__input–small oder suchformular__input–big).
