SCSS – Was kann die praktische Stylesheet-Sprache?

CSS-Präprozessoren wie Sass und SCSS bieten Webdesignern und Entwicklern neue Möglichkeiten, CSS auf effiziente Art und Weise zu nutzen. Von der Organisation des Codes bis hin zur Schaffung dynamischer und wiederverwendbarer Styles bieten sie eine Vielzahl von Funktionen, die die Effizienz steigern und die Gestaltung von Webseiten auf ein höheres Niveau heben. Gerade SCSS hat sich hier als relativ einfach anzuwendende Alternative einen Namen gemacht.

Was bedeutet SCSS?

SCSS steht für „Sassy Cascading Style Sheets“ und erweitert die herkömmliche CSS-Syntax um zusätzliche Funktionen und Optionen. So können Sie mit SCSS Variablen, Verschachtelungen, Mixins und andere Funktionen verwenden, die zwar einige Gemeinsamkeiten mit der Arbeitsweise in CSS haben, das Gestalten und Organisieren von Weblayouts aber deutlich erleichtern.

Wie CSS ist SCSS eine Stylesheet-Sprache, funktioniert aber mittels Präprozessor: In SCSS geschriebene Stylesheets (mit der Endung .scss) werden vor dem Einsatz in CSS umgewandelt (kompiliert). SCSS ist eine neuere Syntax-Variante des CSS-Präprozessors Sass (für Syntactically Awesome Style Sheets), der bereits in den frühen 2000er Jahren entstand. Sass war bahnbrechend, da es eine kompaktere, logischere und leistungsfähigere Syntax für CSS bot. Einige Jahre später, mit Version Sass 3, wurde SCSS eingeführt, um eine CSS-ähnlichere Syntax bereitzustellen, volle Kompatibilität mit CSS3 zu gewährleisten und so die Integration in bestehende Projekte zu erleichtern. Seitdem hat sich SCSS als beliebter Standard in der Webentwicklung etabliert und die originale Sass-Syntax bei der Popularität überholt.

Grundlegende Funktionen

Variablen: Mit Variablen in SCSS gelingt die Speicherung von Werten, die Sie im gesamten Stylesheet wiederverwenden können. Sie beginnen mit dem Dollarzeichen gefolgt von einem Namen und einem Wert. Beispielsweise kann eine Farbe mit $primary-color: #3498db; definiert und dann später im Code auf Eigenschaften anwendet werden: color: $primary-color;. Durch die Verwendung von Variablen ist es weniger aufwendig, Änderungen durchzuführen, da die Anpassung der einen Variable ausreicht, um zum Beispiel die Schriftfarbe auf der gesamten Website neu zu definieren. Im Unterschied zu den vergleichbaren Custom Properties von CSS lassen sich hier die Sass-Scripting-Funktionen nutzen, zum Beispiel Abstände durch Multiplikation eines Wertes verändern. Außerdem liegt die Browserkompatibilität bei den Custom Properties noch nicht bei 100 Prozent.
Verschachtelung: Das Prinzip der Verschachtelung in SCSS führt zu einer hierarchischen Strukturierung von CSS-Regeln, die der Verschachtelung der HTML-Elemente ähnelt. Anstatt jedes Element separat zu definieren, können Sie verschachtelte Regeln erstellen, wodurch sich der Code übersichtlicher gestaltet. Das fördert erheblich die Lesbarkeit und Übersichtlichkeit des Codes. Das vergleichbare CSS-Nesting, 2021 auf den Weg gebracht, ist derzeit erst als „Working Draft“ verfügbar (Stand November 2023), wird aber mittlerweile von den meisten Browsern unterstützt.
Mixins: Mixins sind wiederverwendbare Code-Snippets, die mit SCSS definiert und dann in verschiedenen Teilen des Stylesheets aufgerufen werden können. Sie ermöglichen die Zusammenfassung von wiederkehrendem Code. Ein Beispiel ist die Definition eines Mixins für Schatten: @mixin box-shadow($x, $y, $blur, $color) { box-shadow: $x $y $blur $color; }, der dann mit @include box-shadow(2px, 2px, 4px, #000); aufgerufen wird. Mixins erleichtern die Wartung und sorgen für eine kompaktere Codebasis.

Weitere Grundlagen

SassScript

SassScript ist die Skriptsprache, die innerhalb von Sass (und damit SCSS) verwendet wird und für den größeren Funktionsumfang sorgt.

@-Regeln und deren Verwendung

Wie in CSS gibt es auch in SCSS die sogenannten @-Regeln. Zusätzlich zu den in CSS (wie @import oder @media) unterstützt SCSS weitere Regeln, beispielsweise @extend, @mixin oder @use. Die SCSS-eigenen @-Regeln erweitern wesentlich die Funktionalität von CSS und bieten mehr Flexibilität bei der Gestaltung von Stylesheets (mehr Infos). Beispiele:

@extend ermöglicht es Selektoren, Stile voneinander zu erben.

@mixin und @include erleichtern die Wiederverwendung von Stileinheiten (siehe oben).

@use lädt Mixins, Funktionen und Variablen aus anderen Sass-Stylesheets und kombiniert CSS aus mehreren Stylesheets miteinander.

@import erweitert die gleichnamige CSS-@-Regel, um Stile, Mixins, Funktionen und Variablen aus anderen Stylesheets zu laden.

@function definiert eigene Funktionen, die in SassScript-Ausdrücken verwendet werden können.

Kontrollstrukturen (Bedingungen, Schleifen)

SCSS unterstützt auch @-Regeln zur Ablaufkontrolle, mit denen sich Kontrollstrukturen wie Bedingungen und Schleifen einfacher und flexibler nutzen lassen. Wie in anderen Programmiersprachen auch erlauben es Bedingungen wie @if, @else if und @else, basierend auf bestimmten Kriterien unterschiedliche Styles anzuwenden. Schleifen wie @for und @each übernehmen das wiederholte Durchlaufen von Werten oder Elementen, was besonders nützlich ist, um repetitive Aufgaben effizient zu bewältigen. Diese Kontrollstrukturen erweitern die Potenziale der Stylesheet-Erstellung.

Erweiterte Import-Funktion (Partials)

Wie CSS kennt auch SCSS die @import-Regel, erweitert aber ihre Fähigkeiten. @import kann Sass- und CSS-Stylesheets importieren, mehrere kleine Stylesheets („Partials“ genannt) miteinander kombinieren und auch auf Mixins, Funktionen und Variablen zugreifen. Bei reinen CSS-Importen muss für jede Ressource eine @import-Regel definiert werden, und für jede Regel muss der Browser beim Rendern der Seite eine HTTP-Anfragen stellen. Sass-Importe werden dagegen bei der Kompilierung verarbeitet, nicht erst beim Rendern.

Mit dem Prinzip der Partials können CSS-Dateien aufgeteilt werden, um den Code übersichtlicher zu gestalten. Die Partials-Dateien haben zusätzlich zur Endung .scss einen Unterstrich (_) am Anfang. Sie sind besonders nützlich für wiederkehrende Elemente wie Header oder Footer, die damit nur einmal definiert werden müssen.

Die Unterschiede zu CSS

Viele Konzepte und Funktionen von SCSS haben Äquivalente oder ähnliche Funktionalitäten in reinem CSS. Vieles, wenn nicht sogar alles, was Webentwickler so brauchen – Bedingungen, Importe, Variablen etc. – lässt sich mit einigen Tricks in nativem CSS umsetzen. Jedoch erhöhen SCSS und Sass mit durchdachten Erweiterungen wie Mixins, Verschachtelungen, neuen @-Regeln, mathematischen Operatoren oder Partials-Importen gezielt Komfort, Funktionsumfang und Effizienz von CSS.

Es gibt natürlich auch Unterschiede im Handling: Sass-/SCSS-Code muss erst zu CSS kompiliert werden, um im Browser nutzbar zu sein; das kann den Entwicklungsprozess verlangsamen, weil man nicht mal eben die Auswirkungen einer kleinen Code-Änderung checken kann. Ebenso lässt sich CSS wie gewohnt mit den Dev-Tools im Browser debuggen, SCSS nicht. Andererseits kann man sich bei SCSS von der IDE seiner Wahl helfen lassen, und der Compiler warnt bei Syntaxfehlern.

SCSS vs. Sass

Da es sich bei Sass und SCSS nur um unterschiedliche Syntax-Varianten handelt, bieten beide den gleichen Sass-Funktionsumfang. Die ursprüngliche Sass-Syntax (Dateiendung .sass) verwendet eine Formatierung, die auf Einrückungen und Zeilenumbrüchen basiert, um die Struktur des Codes zu definieren. Es gibt keine geschweiften Klammern oder Semikolons, was zu einer kompakteren und weniger schreibintensiven Syntax führt.

Die Sass-Variante SCSS nutzt eine CSS-ähnliche Syntax mit geschweiften Klammern und Semikolons, was sich für viele eher wie die vertraute Arbeit mit herkömmlichen CSS anfühlt. SCSS ist daher meist schneller zu erlernen und bietet einen sanfteren Übergang für Entwickler, die bereits mit CSS vertraut sind. Zudem stellt SCSS eine Obermenge von CSS dar, was bedeutet, dass CSS-Code direkt in SCSS funktioniert. Bei Sass ist das nicht der Fall.

Die Vorteile von SCSS im Überblick

Nützliche Funktionen und mehr Komfort
Verbesserte Lesbarkeit, Struktur und Konsistenz
Modularer, leicht wartbarer Code
Mehr Effizienz in der Entwicklung
Erleichterte Zusammenarbeit im Team
Code-Optimierung und Fehlerkontrolle durch Compiler

Der Einsatz

Entwickler können sich die Arbeit mit diversen Frameworks und Bibliotheken erleichtern, die (auch) SCSS unterstützen, zum Beispiel avalanche, Hocus-Pocus, Materialize oder Foundation for Sites. Auch mit Bootstrap kann SCSS eingesetzt werden.

Mittels spezieller Tools wird SCSS – ebenso wie Sass-Code – in validen CSS-Code kompiliert. Das Kompilieren erlaubt es, von Webbrowsern lesbaren CSS-Code zu erzeugen und dennoch die effiziente Entwicklungsumgebung von SCSS zu nutzen.

Für die Kompilation stehen Pakete für Node.js sowie APIs bzw. Wrappers für JavaScriptv, Ruby, Swift und Java zur Verfügung. Infos zur Installation von Sass finden Sie auf der offiziellen Sass-Website.

Fazit

SCSS stellt eine leistungsstarke Erweiterung für herkömmliches CSS dar, indem es zusätzliche Funktionen bietet und eine verbesserte Strukturierung des Codes ermöglicht. Durch neue @-Regeln, Mixins, Verschachtelungen und weitere Funktionen erleichtert es die Entwicklung, Wartung und Lesbarkeit von Stylesheet-Code. Mit seiner Flexibilität und dem großen Funktionsumfang ist diese leistungsstarke CSS-Erweiterung eine wertvolle Ressource für die moderne Webentwicklung.

Titelmotiv: Photo by Maik Jonietz on Unsplash

Über
Letzte Artikel

Host Europe

Hinter Ihrem Web-Erfolg steht höchste Leistung. Wir erfüllen auch Ihre Hosting-Wünsche – mit engagierten Experten und führenden Technologien. Host Europe - Professionelle Hosting Services für Privatkunden & Unternehmen.

Letzte Artikel von Host Europe (Alle anzeigen)