Sass (Syntactically Awesome Style Sheets) ist ein CSS-Präprozessor, der Stylesheets um Variablen, Verschachtelung, Mixins und Funktionen erweitert. Der Browser bekommt am Ende normales CSS – die Sass-Datei wird vorher in eine .css-Datei übersetzt.
SCSS oder SASS?
Sass kennt zwei Syntaxen: die modernere SCSS-Variante (ab 2010) ist ein Superset von CSS und nutzt geschweifte Klammern sowie Semikolons – jedes gültige CSS ist zugleich gültiges SCSS. Die ältere SASS-Einrückungssyntax verzichtet auf Klammern und Semikolons.
Die wichtigsten Sass-Befehle
$variable: wert;– Variablen deklarieren, z. B.$primary: #2563eb;- Verschachtelung:
.nav { .item { ... } }erzeugt die Kaskade automatisch @mixin name { ... }+@include name;– wiederverwendbare Bausteine mit Argumenten@extend .base;– Vererbung von Selektoren@use 'partials/_button';– Module laden (seit Dart Sass, ersetzt@import)@function– eigene Funktionen definieren; eingebaute Funktionen wielighten()unddarken()@if/@else,@eachund@for– Logik im Stylesheet
So kompilierst du Sass
sass styles.scss styles.css
sass --watch styles.scss:styles.cssDie offizielle Implementierung ist Dart Sass (seit 2016); die ältere C++-Variante LibSass wurde 2020 eingestellt. Bootstrap setzt ab Version 4 auf SCSS.
Grundlagen: HTML- und CSS-Befehle. Verwandt: Stylus-Befehle als alternative Präprozessor-Syntax. In Shopify-Themes wird SCSS typischerweise mit der Template-Engine Liquid-Befehle kombiniert.