SCSS ist ein CSS-Präprozesser, mit dem man effizienter, strukturierter und skalierbarer CSS schreiben kann. Zu den Hauptmerkmalen von SCSS zählen:
- Verschachtelungen: Damit ist es möglich, CSS-Regeln, aber auch einfach nur die CSS-Selektoren, ineinander zu verschachteln und zu strukturieren. Das bietet dem Entwickler eine besserer Übersicht über die Styles und macht das Schreiben von CSS-Regeln effizienter.
- Variablen: Der Vorteil von Variablen wird ein wenig abgeschwächt, seitdem man auch in CSS Variablen nutzen kann. Dennoch ist es möglich, in SCSS Variablen zu setzen, die Styles beinhalten und die man dann an diversen Stellen wieder verwenden kann.
- Vererbung: Es ist möglich, Styles von einer anderen CSS-Regel komplett zu erben und entsprechend zu erweitern. Damit spart man sich doppeltes Definieren von Styles und pflegt diese nur an einer Stelle. Ein großer Vorteil ergibt sich daher nicht nur beim initialen Schreiben der Regeln, sondern auch bei späteren Erweiterungen bzw. Anpassungen.
- Mixins: Damit ist es möglich, wiederverwendbare CSS-Regeln / -Blöcke zu erstellen. Mixins können dabei auch Parameter entgegennehmen und weiterverarbeiten. Im Verlauf dieses Beitrags werden Mixins genauer beschrieben.
- Functions: SCSS bringt selbst einige nützliche Functions mit. Mit diesen ist es möglich, Werte dynamisch zu berechnen. Man hat jedoch auch die Möglichkeit selbst Functions in SCSS zu entwickeln. In diesem Beitrag werden Functions genauer erklärt.
Zusammengefasst bringt SCSS die folgenden Vorteile für die Entwicklung:
- Bessere Organisation / Strukturierung: Durch die o.g. Hauptmerkmale lässt sich der Code wesentlich besser strukturieren und modularisieren.
- Effizientere Pflege und Skalierbarkeit: Der Code wird durch die Verwendung von Mixins, Functions und Variablen deutlich einfacher zu pflegen bzw. zu erweitern.
- Wiederverwendbarkeit: Mittels Mixins und Variablen kann man Styles an einer zentralen Stelle definieren, pflegen, erweitern, anpassen und dann an anderen Stellen wiederverwenden.
Mixins
Ein Mixin wird in SCSS mit @mixin, gefolgt von einem eindeutigen Namen, definiert. In einem Mixin kann man dann wiederverwendbare Styles definieren und zusammenfassen. Mittels @include kann man dann das Mixin an jeder beliebigen Stelle einbinden.
Das bietet den Vorteil, dass man bestimmte Styles, die man häufiger braucht, an einer zentralen Stelle verwalten und dann überall nutzen kann. Das vermeidet redundanten Code, schafft Flexibilität und reduziert den Wartungsaufwand. Passt man bspw. eine CSS-Regel in einem Mixin an, wirkt sich das auf alle Regeln aus, die das Mixin mittels @include verwenden.
Beispiele für SCSS Mixins
@mixin button($color, $padding: 8px) {
background-color: $color;
padding: $padding;
border: none;
border-radius: 4px;
}
.button--primary {
@include button(#ff3300, 10px);
}
.button--secondary {
@include button(#686868);
}In o.g. Beispiel-Code wird ein Mixin mit dem Namen “button” definiert. Das Mixin nimmt die beiden Parameter $color und $padding entgegen, wobei $padding optional ist. Wird kein Wert für $padding übergeben, ist der Standardwert 8px. Wie man erkennt, wird mit $color eine Hintergrundfarbe gesetzt. Mit $padding wird ein Padding gesetzt.
Unter der Definition des Mixins, wird dieses innerhalb von zwei Klassen eingebunden. Die Einbindung geschieht mit @include, gefolgt vom Namen (“button”) des Mixins. Dadurch werden in jeder der beiden Klassen die Styles angewendet, die im Mixin festgelegt sind.
In der Klasse button–primary werden dem Mixin ein Farbwert und ein Pixelwert übergeben. Dadurch erhält diese Klasse im kompilierten CSS-Stylesheet den entsprechenden Farbwert als Hintergrund und den Pixelwert als Abstand (Padding). Bei der Klasse button–secondary wird als Hintergrund der entsprechend dort übergebene Farbwert gesetzt. Der Abstand wird hier nicht an das Mixin übergeben, somit bekommt die Eigenschaft padding den Standardwert von 8px, der im Mixin definiert ist.
Das o.g. Beispiel ist ein sehr vereinfachtes Beispiel für ein Mixin. Oft können diese auch deutlich komplexer sein und verschiedene Styles über If-Anweisungen ausspielen. Ein häufiger Anwendungsfall sind Breakpoints, die man verwendet, um bestimmte Styles nur auf bestimmten Bildschirmbreiten anzuwenden. Nachfolgender Code zeigt ein Beispiel für ein Mixin, das Breakpoints bereitstellt:
@mixin breakpoint($value) {
@if $value == 'xsmall' {
@media (min-width: 544px) {
@content;
}
}
@else if $value == 'maxXsmall' {
@media (max-width: 543px) {
@content;
}
}
@else if $value == 'small' {
@media (min-width: 768px) {
@content;
}
}
@else if $value == 'maxSmall' {
@media (max-width: 767.98px) {
@content;
}
}
@else if $value == 'medium' {
@media (min-width: 992px) {
@content;
}
}
@else if $value == 'maxMedium' {
@media (max-width: 991.98px) {
@content;
}
}
@else if $value == 'large' {
@media (min-width: 1232px) {
@content;
}
}
@else if $value == 'maxLarge' {
@media (max-width: 1231.98px) {
@content;
}
}
@else if $value == 'xLarge' {
@media (min-width: 2561px) {
@content;
}
}
@else if $value == 'maxXlarge' {
@media (max-width: 2560.98px) {
@content;
}
}
}
#burger-menu {
@include breakpoint(medium) {
display: none;
}
}Man sieht in diesem Beispiel, dass dem Mixin einen Wert ($value) übergeben muss, der steuert, welcher Media-Query angewendet werden soll. Unter der Definition des Mixins selbst sieht man ein Beispiel für eine Anwendung des Mixins. Man erkennt dort, dass innerhalb des Mixins, welches mit @include eingebunden wird, weitere Styles folgen – in diesem Fall ein display: none;. Innerhalb des Mixins sorgt @content dafür, dass genau diese Style-Anweisungen anstelle von @content platziert werden. D.h. @content ist eine Art Platzhalter oder Slot, der von außen gefüllt wird.
Die Beispiel-Einbindung des Breakpoint-Mixins wird kompiliert im CSS wie folgt aussehen:
@media (min-width: 992px) {
#burger-menu {
display: none;
}
}Der erste Blick lässt vermuten, dass die reine CSS-Schreibweise doch deutlich weniger aufwendig ist. Im Grunde ist das korrekt, weil das Mixin erst einmal initial geschrieben werden muss. Der große Vorteil liegt aber einerseits in der Wiederverwendbarkeit und andererseits in der verbesserten Wartung.
Angenommen man hat die Styles modular in diversen Stylesheets verteilt, dann muss man sich nicht alle Breakpoints merken oder immer wieder von anderen Stellen abschauen. Man braucht lediglich die Definitionen wie “medium”, “small”, etc. zu kennen. Die genauen Pixelwerte dahinter sind bei der Implementierung neuer Styles nicht wichtig, da sie zentral verwaltet sind. Genau das ist auch ein großer Vorteil bei Wartung bzw. Anpassung solcher Breakpoints. Besteht der Bedarf Pixelwerte für die Breakpoints anzupassen, muss man das in diesem Fall lediglich zentral im Mixin machen. Die Anpassungen (geänderte Pixelwerte) wirken sich auf alle Stellen im Code aus, die dieses Mixin verwenden. Der Aufwand ist an der Stelle also enorm reduziert.
Fazit zu SCSS Mixins
SCSS Mixins bieten wiederverwendbaren Code. Das macht es für Entwickler, gerade bei der Weiterentwicklung von Systemen, einfacher bestimmte Styles (z.B. Button-Styles) immer, in den verschiedensten CSS-Regeln zu verwenden, ohne, dass sie sich jede Style-Vorgabe innerhalb des Mixins merken müssen. Das beschleunigt die Entwicklung deutlich.
Außerdem sind Anpassungen an Style-Vorgaben, die in Mixins untegebracht sind, schnell systemweit umgesetzt. Man passt lediglich das Styling im Mixin an und es wirkt sich auf alle Elemente aus, die dieses Mixin verwenden.
Übrigens nutzen wir seit Jahren SCSS und haben bereits unzählige Mixins geschrieben – komplexe sowie einfache. SCSS Mixins sind aber nur ein Bruchteil dessen, was wir bereits mit SCSS und modularem, strukturiertem und effizientem Aufbau von Styles, umgesetzt haben. Kontaktieren Sie uns gerne und lassen Sie uns über Ihr Webprojekt & die Möglichkeiten sprechen – egal, ob Sie ein neues System benötigen oder die Struktur eines bestehenden Systems verbessern möchten.
Übersicht von Webentwicklung