Ein untrennbares Element von Webseiten, also Webanwendungen ist die Definition eines Farbschemas. Bei komplexeren Projekten kann das Kodieren zahlreicher Farbänderungen für den Entwickler zeitaufwändig sein.

Glücklicherweise gibt es Werkzeuge, die die Arbeit erheblich erleichtern und beschleunigen können.

Sass-Präprozessor

Sass ist ein CSS-Präprozessor, mit dem Sie mit Stylesheets wesentlich schneller und effizienter arbeiten können. Durch Elemente wie Variablen oder Funktionen kann der Programmierer das Schreiben der visuellen Ebene des Codes der Webseite automatisieren.

Nachfolgend sind einige nützliche Funktionen des Sass-Präprozessors aufgeführt, dank derer die Bedienung von Farben einfach und angenehm ist.

Als Erstes definieren wir eine Variable, die unsere Grundfarbe definiert, anhand derer wir die Funktionsweise jedes der besprochenen Probleme veranschaulichen:

 

 

Modelle des Farbraums

Um die Funktionen für das Arbeiten mit Farben vollständig zu verstehen und zu verwenden, sollte erwähnt werden, dass ein Teil von ihnen an bestimmten Farbraummodellen arbeitet. Dies sind: HSL, RGB, RGBA.

HSL-Farbraum

In diesem Modell wird die Farbe mit drei Koordinaten definiert.
H (Eng. Hue) – Farbton (Wertebereich liegt zwischen 0 und 360 Grad im Farbkreis)
S (Eng. Saturation) – Sättigung (Wertebereich von 0 bis 100
L (Eng. Lightness) – Helligkeit (Wertebereich von 0 bis 100)

Funktionen, die auf HSL basieren

Die zwei beliebtesten Funktionen sind lighten und darken. Mit ihrer Verwendung können wir erfolgreich monochrome Schemata (Farbpaletten, die auf einer Farbe basieren) erstellen.

Die Verwendung dieser beiden Funktionen in der Praxis sieht folgendermaßen aus:

lighten
Diese Funktion nimmt einen in Prozent ausgedrückten Wert an, d.h. den Aufhellungsgrad der Grundfarbe.

darken
Wie Sie sich vorstellen können, funktioniert darken analog zum lighten, aber in diesem Fall bestimmen wir den Grad der Verdunkelung der Farbe:

lighten($color, 10%)
darken($color, 10%)

Wie können diese Funktionen in der Praxis nützlich sein?

Stellen Sie sich vor, wir haben ein Element auf der Seite – zum Beispiel einen Button. Wenn wir wollen, dass er heller wird, wenn wir mit dem Mauszeiger über ihn fahren, müssen wir den genauen Wert der Farbe angeben oder in einem Grafikprogramm versuchen ihn aufzuhellen.

Dank der Funktion lighten genügt es, auf die Grundfarbe zu verweisen und anzugeben, wie stark wir die Farbe des Buttons aufhellen möchten. Et voila!

saturate
Dies ist eine weitere sehr nützliche Funktion, dank der wir die Farbsättigung leicht erhöhen und nur einen Prozentsatz angeben können.

desaturate
Verringert den Farbsättigungsgrad.

saturate($color, 60%)
desaturate($color, 60%)


complement
Dies ist eine nützliche Funktion, wenn Sie Komplementärfarben (im Farbkreis gegenüberliegend) erhalten möchten.

 

complement($color)


grayscale
Ändert die Farbe in eine Grauskala, dank der wir eine neutrale Farbe erhalten.

grayscale($color)


RGB(a)-Farbraum

Im RGB-Farbraum wird die Farbe mit drei Komponenten bestimmt, die durch Werte im Bereich von 0 bis 255 definiert werden:
R (Eng. red) – rot
G (Eng. green) – grün
B (Eng. blue) – blau

Der RGBa-Farbraum unterstützt zusätzlich den Alphakanal, der den Transparenzgrad der Farbe definiert (ausgedrückt im Bereich von 0 bis 1).

Funktionen, die auf RGB(a) basieren

Die grundlegende nützliche Funktion dieses Farbraums ist die Funktion rgb, mit der Sie eine auf RGB basierende Farbe in HEX-Komponenten konvertieren können.

rgb($red, $green, $blue)
rgba($color, $alpha)

 

Dank dieser Funktion können wir der definierten Farbe einfach Transparenz hinzufügen. *

rgba($color, 0.4)


*Dies ist nicht die einzige Funktion, mit der Sie mit der Transparenz arbeiten können. Es lohnt sich auch einen Blick auf die Funktionen transparentize und opacify zu werfen.

Erweiterte Farboperationen

Sass verfügt über eine eingebaute Funktion adjust-color, die eine oder mehrere der Farbeigenschaften erhöht oder verringert, die wir als optionale Parameter angeben. Damit die Funktion ordnungsgemäß funktioniert, müssen nur die Parameter angegeben werden, die mit demselben Farbraum funktionieren.

adjust-color($color, $red: -55, $blue: 75)


Eine weitere interessante Funktion, mit der Sie eine oder mehrere Farbeigenschaften ändern können, ist die Funktion change-color. Parameter, die diese Funktion akzeptiert, sind optional – die aktuellen Parameter für die angegebene Farbe werden ersetzt. Hier ist es auch wichtig, dass die von uns bereitgestellten Eigenschaften auf einem Farbraum arbeiten.

change-color($color, $red: 120, $blue: 5)

Los geht‘s!

Dank zahlreicher Funktionen zur Farbmodifizierung können wir bequem komplexe Farbschemata auf der Webseite erstellen und vor allem den gesamten Kodierungsprozess beschleunigen.

Weitere Funktionen finden Sie auf der Webseite:

http://sass-lang.com/documentation/Sass/Script/Functions.html