SCSS – CSS-Präprozessor für skalierbare Stylesheets
SCSS (Sassy CSS) ist ein CSS-Präprozessor der CSS um Variablen, Verschachtelung, Funktionen und Modularchitektur erweitert. SCSS-Dateien werden zu normalem CSS kompiliert — Browser sehen nur CSS, SCSS ist ein Entwicklungs-Tool. Moderne CSS-Features (Custom Properties, nesting) übernehmen viele SCSS-Funktionen — SCSS bleibt aber relevant für komplexe Token-Architekturen und Mixin-Libraries.
Wichtige SCSS-Features
Variablen und Design Tokens
SCSS-Variablen ($primary-color: #678dcb) für wiederverwendbare Werte. Für Token-Systeme: Primitive Variablen zu Semantischen Variablen zu CSS Custom Properties. SCSS-Variablen werden zur Build-Zeit aufgelöst, CSS Custom Properties zur Laufzeit — das ermöglicht Theme-Switching.
@use und @forward (nicht @import)
@import ist deprecated und global. @use importiert Module mit Namespace: @use 'tokens/colors' as c — dann c.$primary. @forward macht Module für andere zugänglich. Diese Architektur verhindert Namenskonflikte und macht Abhängigkeiten explizit.
Mixins
Wiederverwendbare Style-Blöcke mit optionalen Parametern. @mixin button($color) { background: $color; } dann @include button(blue). Für häufig wiederkehrende Pattern: Fokus-Ringe, Responsive-Breakpoints, Glassmorphism-Effekte.
Nesting
CSS-Regeln innerhalb anderer schachteln. Gut: .card { &__title { } &:hover { } } — BEM-Modifier und Pseudo-Klassen. Schlecht: zu tiefe Verschachtelung (max. 3 Ebenen). Moderne CSS-Nesting ist inzwischen nativ verfügbar.
Häufig gestellte Fragen
Brauche ich SCSS noch wenn CSS Custom Properties existieren?
SCSS bleibt nützlich für: komplexe Mixin-Libraries, Build-Zeit-Berechnungen, Token-Architektur mit mehrschichtiger Variable-Transformation, und Teams die ein konsistentes Styling-System brauchen. Für kleinere Projekte kann natives CSS mit Custom Properties ausreichen.
Was ist der Unterschied zwischen SCSS und Sass?
Sass ist der Präprozessor (das Tool). SCSS ist die neuere Syntax mit CSS-kompatibler Schreibweise (geschweifte Klammern, Semikolons). Die ältere Sass-Syntax (einrückungsbasiert, .sass-Extension) wird kaum noch verwendet. 'Sass' wird oft als Synonym für SCSS verwendet.