#2183 SCSS-Funktionen in der Konfiguration verwenden
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.
Wichtig ist ein fehlerfreier Syntax um Fehler in der Storefront zu vermeiden, darum empfehlen sich diese Funktionen eher für erfahrene Anwender.
SCSS-Funktionen (für erfahrene Anwender)
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%)Weiterführende Links:
- Einführung: "Beschreibung der Feldtypen in der Theme-Konfiguration"
- Anleitung: "Theme-Variablen in der Konfiguration verwenden"
- Tool: "Sass Color Generator"
Bitte teile uns deine Meinung mit!
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, starte die individuelle Fehlerbehebung. Hierüber kannst du auch ein Support-Ticket eröffnen, falls du den Fehler nicht selber beheben kannst.
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Einführung Anleitungen Handbuch Profiwissen Häufige Fragen Häufige Fehler Shopware allgemein
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, starte die individuelle Fehlerbehebung. Hierüber kannst du auch ein Support-Ticket eröffnen, falls du den Fehler nicht selber beheben kannst.