Sass Schulung: Dart Sass, Modulsystem und Migration

Sass heute einordnen

• Was Sass leistet und was der Präprozessor im Build-Schritt erzeugt
• Dart Sass als einzige gepflegte Implementierung; Ruby Sass, LibSass und node-sass ablösen
• Installation über npm (sass, sass-embedded) oder als eigenständige Binärdatei
• Einbindung in Vite und andere Build-Werkzeuge, moderne statt veralteter JavaScript-API
• Deprecation-Warnungen lesen und gezielt mit --fatal-deprecation verschärfen

Syntax, Variablen und Verschachtelung

• SCSS- und eingerückte Syntax im Vergleich, Dateiendungen .scss und .sass
• Sass-Variablen gegenüber CSS Custom Properties: Build-Zeit oder Laufzeit
• Verschachtelung in Sass und natives CSS Nesting: Gemeinsamkeiten und Unterschiede
• Elternselektor & für Zustände, Modifikatoren und BEM-Suffixe
• Kommentare: // bleibt im Quelltext, /* */ landet im CSS, /*! im komprimierten Build

Modulsystem: @use und @forward statt @import

• Partials als Module mit @use: Namensräume, as und private Mitglieder mit -
• Konfigurierbare Module mit !default und @use … with (…)
• Öffentliche Schnittstelle einer Bibliothek mit @forward, show und hide gestalten
• Eingebaute Module sass:math, sass:list, sass:map, sass:string und sass:color
• Bestand umstellen mit sass-migrator module und Abhängigkeiten danach aufräumen

Mixins, @extend und Platzhalter

• Mixins mit Parametern, Standardwerten und @content für Breakpoints und Zustände
• @extend und seine Nebenwirkungen: aufgeblähte Selektoren und Reihenfolgeprobleme
• Platzhalterselektoren %name als kontrollierte Basis für @extend
• Wann ein Mixin, eine Utility-Klasse oder eine Custom Property die bessere Wahl ist

SassScript: Listen, Maps und Kontrollstrukturen

• Interpolation #{} in Selektoren, Eigenschaftsnamen und Media Queries
• Listen anlegen und verarbeiten mit list.nth, list.append und list.index
• Schleifen mit @each über Listen und Maps, etwa für Farb- und Abstandsskalen
• Zählschleifen mit @for für Rasterklassen und Stufen
• Maps für Design-Tokens: map.get, map.merge, verschachtelte Maps mit map.deep-merge
• Vergleichs- und Logikoperatoren, @if/@else und Division mit math.div statt /

Funktionen und Farben

• Eigene Funktionen mit @function, @return und Fehlermeldungen über @error
• Farbfunktionen modern: color.adjust, color.scale und color.channel statt darken()
• Farben zur Laufzeit im Browser: color-mix() und relative Farbsyntax als Alternative
• Einheiten rechnen mit sass:math und wo calc() im Browser genügt

Was natives CSS inzwischen übernimmt

• Custom Properties für Themes und Dark Mode statt neu kompilierter Varianten
• Natives Nesting im Browser: Baseline-Status und Grenzen bei Selektoren
• Cascade Layers @layer statt Reihenfolge-Tricks in der Importkette
• Überblick über neue Sprachmittel, Vertiefung im Seminar CSS für Entwickler
• Was bei Sass bleibt: Maps, Schleifen, Build-Zeit-Prüfungen und Bibliotheks-Themes

SCSS-Codebasen modernisieren oder ablösen

• Bestandsaufnahme: Importgraph, ungenutzte Variablen, @extend-Ketten und Warnungen
• Kompiliertes CSS vor und nach jedem Schritt vergleichen als Sicherheitsnetz
• Schrittweise Ablösung: Variablen zu Custom Properties, Verschachtelung nativ belassen
• Bibliotheken wie Bootstrap über Sass-Module konfigurieren statt Quellen zu kopieren
• Linting mit Stylelint und stylelint-config-standard-scss

Sass-Migration mit Coding-Agenten

• Agent arbeitet Deprecation-Warnungen einzeln ab, Build mit --fatal-deprecation als Abnahme
• Vorher-nachher-Diff des kompilierten CSS nach jedem Umbauschritt prüfen lassen
• sass-migrator zuerst laufen lassen, den Agenten nur für die Reste einsetzen
• Ersetzen von Sass-Variablen durch Custom Properties auf Laufzeitwirkung im Theme prüfen
• Unbenutzte Variablen und Mixins vom Agenten auflisten, Löschen erst nach Suche im Templatecode

Praxisprojekt: Altes Theme eines Kundenportals modernisieren

• SCSS mit @import-Kette, darken() und /-Division auf Dart Sass mit @use umstellen
• Farbwerte in Custom Properties überführen und einen Dark Mode ohne zweiten Build ergänzen
• Abstands- und Farbskalen als Maps behalten und daraus Utility-Klassen erzeugen
• Migrationsplan mit Reihenfolge, Risiken und Prüfschritten für das eigene Team

Lernziele

• Sie stellen eine SCSS-Codebasis von @import auf das Modulsystem mit @use und @forward um.
• Sie ersetzen abgekündigte globale Funktionen durch die eingebauten Module wie sass:color und sass:map.
• Sie setzen Mixins, Funktionen, Maps und Schleifen gezielt dort ein, wo natives CSS sie nicht ersetzt.
• Sie entscheiden je Baustein begründet, ob Sass oder natives CSS (Nesting, Custom Properties, color-mix()) die bessere Lösung ist.
• Sie sichern Umbauten über einen Vergleich des kompilierten CSS ab.

Zielgruppe

• Teams mit gewachsenen SCSS-Codebasen und vielen Deprecation-Warnungen
• Frontend-Entwickler:innen, die Sass-Themes für Bootstrap oder eigene Designsysteme pflegen
• Technische Leitungen, die über Modernisierung oder Ablösung von Sass entscheiden