Links

SCSS-Funktionen in der Konfiguration verwenden

In dieser Anleitung erfährst du, wie du SCSS-Funktionen in der Theme-Konfiguration verwenden kannst.
In der Theme-Konfiguration kannst du in Farbfeldern neben Theme-Variablen auch einfache SCSS-Funktionen verwenden. Mit solchen Funktionen kannst du beispielsweise Farben abdunkeln oder aufhellen.

SCSS-Funktionen verwenden

Wichtig ist ein fehlerfreier Syntax, um Fehler in der Storefront zu vermeiden, darum empfehlen sich diese Funktionen eher für erfahrene Anwender.
Tipp: Möchtest du einfach nur Farben abdunkeln oder aufhellen und keine SCSS-Funktionen nutzen, kannst du zum Generieren von Farbnuancen hell und dunkel beispielsweise das Online-Tool "Sass Color Generator" nutzen.

Nützliche SCSS-Funktionen

Nachfolgend stellen wir dir ein paar nützliche SCSS-Funktionen vor. Mehr Informationen dazu findest du in der offiziellen SASS-Dokumentation.
Zum Abdunkeln von Farben kannst du die Funktion "darken" verwenden:
darken(#0c7ebb, 10%)
darken($sw-color-brand-primary, 10%)
Zum Aufhellen von Farben nutze die Funktion "lighten":
lighten(#111, 10%)
lighten($sw-text-color, 10%)
Darüber hinaus gibt es noch weitere SCSS-Funktionen, welche genutzt werden können:
complement($color) // RGB-Komplementärfarbe von $color
grayscale($color) // Grauwert mit gleicher Helligkeit wie $color
darken($color, $amount) // Macht die Farbe $color dunkler (z.B. 10%)
lighten($color, $amount) // Macht $color heller (z.B. 10%)
desaturate($color, $amount) // Reduziert die Sättigung von $color (z.B. 10%)
saturate($color, $amount) // Erhöht die Sättigung von $color (z.B. 10%)
fade-in($color, $amount) // Macht $color undurchsichtiger (z.B. 0.1)
fade-out($color, $amount) // Macht $color transparenter (z.B. 0.1)
Es können auch mehrere SCSS-Funktionen in einem Farbfeld kombiniert werden. Im folgenden Beispiel wird die Sekundärfarbe um 15% aufgehellt und die Sättigung um 5% reduziert:
lighten(desaturate($sw-color-brand-secondary, 15%), 5%)