SCSS
SCSS (Sassy CSS) ist eine Erweiterung von CSS, die Entwicklern zusätzliche Funktionen wie Variablen, verschachtelte Selektoren und wiederverwendbare Code-Bausteine bietet. Browser können SCSS nicht direkt lesen – es muss zuerst in reguläres CSS kompiliert werden. SCSS macht das Schreiben und Pflegen von Styles in grösseren Projekten deutlich effizienter.
- Sass
Was ist SCSS?
SCSS steht für «Sassy CSS» und ist eine Syntaxvariante von Sass (Syntactically Awesome Style Sheets) – einer Erweiterungssprache für CSS. SCSS ist vollständig kompatibel mit CSS: jede gültige CSS-Datei ist gleichzeitig eine gültige SCSS-Datei. Darüber hinaus bietet SCSS Funktionen, die in reinem CSS nicht verfügbar sind.
Browser verstehen SCSS nicht direkt. Vor dem Einsatz muss SCSS mit einem Compiler (wie Dart Sass) in reguläres CSS umgewandelt werden. In modernen Entwicklungsumgebungen passiert das automatisch im Hintergrund.
nav {
a {
color: white;
&:hover { color: lightblue; }
}
}Funfact
Sass wurde 2006 von Hampton Catlin und Natalie Weizenbaum entwickelt – ursprünglich als Ruby-Bibliothek. Der Name «Sassy» ist eine Anspielung auf den Begriff «sass» (englisch für «Frechheit» oder «Widerspruch») – die Idee war, CSS eine freche Erweiterung zu geben. Die SCSS-Syntax wurde 2009 eingeführt, da viele Entwickler die klassische Sass-Syntax (ohne geschweifte Klammern) zu ungewohnt fanden.
SCSS vs. CSS – der Unterschied
.button {
background: #534AB7;
color: #ffffff;
padding: 10px 20px;
}
.button:hover {
background: #3C3489;
}
SCSS – mit Variablen & Nesting
$primary: #534AB7;
$primary-dark: #3C3489;
.button {
background: $primary;
color: #fff;
padding: 10px 20px;
&:hover {
background: $primary-dark;
}
}
Die wichtigsten SCSS-Funktionen
- Variablen: Farben, Schriftgrössen oder Abstände werden einmal definiert und überall wiederverwendet. Ändert sich die Primärfarbe, genügt eine Anpassung an einer Stelle.
- Nesting (Verschachtelung): Unterelemente können direkt innerhalb des Parent-Selektors definiert werden – das entspricht der HTML-Struktur und macht den Code lesbarer.
- Mixins: Wiederverwendbare Code-Blöcke, die an verschiedenen Stellen eingesetzt werden können – ähnlich wie Funktionen in einer Programmiersprache.
- Partials und Import: SCSS-Code kann in mehrere Dateien aufgeteilt und dann zu einer einzigen CSS-Datei zusammengefügt werden – ideal für grosse Projekte mit klar strukturierten Komponenten.
- Berechnungen: SCSS erlaubt direkte Rechenoperationen in Styles – zum Beispiel width: 100% - 2rem – was in CSS erst durch neuere Funktionen wie calc() möglich wurde.
Was bedeutet das für meine Webseite?
Für Webseitenbetreiber ist SCSS in der Regel unsichtbar: Es ist ein Werkzeug für Entwickler, kein Thema für den Alltag. Relevant wird es, wenn man mit Entwicklern spricht, die von Variablen, Mixins oder Sass-Dateien reden – dann handelt es sich meistens um SCSS. Wichtig zu wissen: SCSS-Dateien müssen vor dem Einsatz kompiliert werden. Eine direkt im Browser eingefügte SCSS-Datei funktioniert nicht.