Hardcoding
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.
SCSS auf diesem Projekt
digitalherrmann.de nutzt eine Token-Architektur mit SCSS: primitives/ (Rohwerte) zu semantics/ (Aliases) zu _css-vars.scss (Custom Properties) zu Komponenten. Neue Werte immer als Token definieren, keine Magic Numbers in Komponenten-SCSS.
Häufig gestellte Fragen zum Thema SCSS
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.
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.