Logo? Jetzt anfragen!
← Zurück zum Glossar

Webdesign · Entwicklung · SEO

Sass / SCSS

Sass und SCSS erklärt: vom Quelltext zu CSS | scinet

Redaktionell geprüft ·

Verständlich erklärt

Sass ist eine Sprache zur Vorbereitung von CSS. Du schreibst Regeln mit zusätzlichen Möglichkeiten, etwa Variablen, Mixins und Modulen. Ein Compiler übersetzt diesen Quelltext anschließend in CSS, das der Browser verwenden kann.

SCSS ist die CSS-nahe Schreibweise von Sass mit geschweiften Klammern und Semikolons. Daneben gibt es die eingerückte Sass-Syntax. Wenn jemand von einer SCSS-Datei spricht, ist damit also keine weitere Bibliothek gemeint. Es ist eine Datei, die vor der Auslieferung verarbeitet wird.

Was die zusätzliche Verarbeitung bringt

Stell dir vor, mehrere Komponenten brauchen dieselbe Berechnung für Abstände. Mit Sass kannst du gemeinsame Logik in Funktionen oder Mixins ausdrücken. Module helfen dabei, diese Regeln über Dateien hinweg zu organisieren.

Verschachtelung kann zusammengehörige Selektoren übersichtlicher machen. Zu tiefe Verschachtelung erzeugt allerdings schwer verständliche Abhängigkeiten. Ich würde die ausgegebene CSS-Datei deshalb gelegentlich mit ansehen. Ein kurzer Quelltext bedeutet nicht automatisch eine kleine oder gut wartbare Ausgabe.

Auf einen Blick

SCSS-Quelltext: Variablen, Mixins und Module. Sass-Compiler: Verarbeitet den Quelltext beim Build. CSS im Browser: Wendet die erzeugten Regeln an
Der Browser erhält CSS, nicht den Sass-Quelltext. Sass-Variablen werden beim Build verarbeitet; CSS-Variablen können in der Ausgabe bleiben.Infografik in voller Größe öffnen

Warum @use und @forward wichtig sind

@use lädt ein Sass-Modul und stellt dessen öffentliche Variablen, Funktionen und Mixins normalerweise unter einem Namensraum bereit. Das macht die Herkunft von Werten im Code deutlicher. @forward reicht öffentliche Bestandteile eines Moduls über eine andere Datei weiter. Es kann damit einen gemeinsamen Einstieg für mehrere Dateien bilden.

Beim Umstieg eines älteren Projekts reicht es nicht, alle Schlüsselwörter blind auszutauschen. Prüfe Modulpfade, Konfiguration und Stellen, die bisher globale Variablen erwartet haben. Eine funktionierende Beispielkomponente ist ein guter erster Test, bevor du die gesamte Gestaltung umstellst.

Sass oder CSS-Variablen?

Die beiden Werkzeuge wirken zu unterschiedlichen Zeitpunkten. Eine Sass-Variable wird beim Übersetzen verarbeitet. Eine CSS-Variable bleibt in der CSS-Datei und wird im Browser aufgelöst. Deshalb eignen sich CSS-Variablen etwa für lokale Theme-Werte, die je nach Bereich unterschiedlich sein sollen.

Du kannst beide kombinieren: Sass organisiert die Erstellung der Styles, CSS-Variablen tragen ausgewählte Werte in die laufende Oberfläche. Für eine kleine Website mit wenigen Regeln kann normales CSS aber bereits ausreichen. Entscheidend ist, ob die zusätzliche Build-Stufe eine konkrete Aufgabe leichter macht und später zuverlässig gepflegt werden kann.

Passend dazu: CSS-Variablen · Bulma · Bootstrap 6 Alpha im Vergleich.

Codebeispiel aus der Praxis

SCSS

Eine Variable vor der Übersetzung

Eigenes SCSS-Beispiel. Im erzeugten CSS steht beim Innenabstand der Wert 1.5rem; die Sass-Variable wird dafür aufgelöst.

$karten-abstand: 1.5rem;

.angebot {
  padding: $karten-abstand;
  border: 1px solid #ccc;
}

Quellen und weiterführende Informationen

  1. Dokumentation Sass Basics Sass · Geprüft
  2. Dokumentation @use Sass · Geprüft
  3. Dokumentation @forward Sass · Geprüft
  4. Dokumentation Variables Sass · Geprüft

Häufige Fragen

Für die Gestaltung braucht er die daraus erzeugte CSS-Datei. Der Sass-Compiler läuft typischerweise im Entwicklungs- oder Build-Prozess. Die Quelldatei allein ersetzt diesen Schritt nicht.

Nein. Moderne CSS-Funktionen decken viele Aufgaben direkt ab. Sass ist sinnvoll, wenn seine zusätzlichen Möglichkeiten im konkreten Projekt gebraucht und vom Team beherrscht werden.