Im Folgenden werden Funktionen der Komponenten erklärt, die die SCSS Bibliothek erweitern:

Mathematische Funktionen

max

max(a, b):Number

Vergleicht a und b; gibt den höheren Wert zurück

min

min(a, b):Number

Vergleicht a und b; gibt den kleineren Wert zurück

Layout

building units

building-unit-box-padding

building-unit-box-padding($line-height, $height, $padding-horizontal)

Erstellt Padding-Werte pasierend auf den Building-Units.

fallback-rgba

fallback-rgba($color, $alpha, $background-color: #fff):color

Gibt eine transparente Farbe als Farbe ohne Transparenz zur Grundfarbe Weiß zurück. Die Farbe gegen die gerechnet wird, kann optional übergeben werden.

capline-pixels

capline-pixels($font-size):Number

Ermittelt die Anzahl der Pixel zwischen Versalhöhe und border einer Schrift bei gegebener Größe und der standardmäßigen Zeilenhöhe.

baseline-pixels

baseline-pixels($font-size):Number

Ermittelt die Anzahl der Pixel zwischen Grundline und border einer Schrift bei gegebener Größe und der standardmäßigen Zeilenhöhe.

Farbfunktionen

HSV-Farbraum

Funktionen für Farben im HSV-Farbraum, wie bspw. in Adobes Photoshop. Farben werden dort mittels Farbton (hue), saturation (Sättigung), Hellwert (value) definiert.

hsv

hsv(hue: 0, saturation: 100%, value: 100%):(hue, saturation, value, 1)

Ein HSV-Farbraum Farb-Objekt (Alpha=1)

hsva

hsva(hue: 0, saturation: 100%, value: 100%, alpha: 1):(hue, saturation, value, alpha);

Ein HSV-Farbraum Farb-Objekt mit Alphawert

color-to-hsv

color-to-hsv(color/red, green: 0, b: 0, a: 1):hsva

Erwartet eine RGB(A)-Farbe (color) oder vier Farbkomponenten (Rot, Grün, Blau, Alpha) und gibt die Farbe im HSV-Farbraum (hsv) zurück.

hsv-to-color

hsv-to-color(hsv(a)/hue, saturation: 100%, value: 100%, alpha: 1):color

Erwartet eine HSV(A)-Farbe (hsv(a)) oder vier Farbkomponenten (hue, saturation, value, alpha) und gibt die Farbe im RGB-Farbraum (rgb(a)) zurück.

hsv-hue

hsv-hue(hsv/color):Number

Gibt den Farbton (hue) einer Farbe (hsv/color) zurück.

hsv-set-hue

hsv-set-hue(color/hsv, hue, return-rgb-color: false):hsv/color

Setzt den Farbton einer Farbe im HSV-Farbraum und gibt sie zurück.

Erwartet eine Farbe (color/hsv) und den zu setzenden Wert. Der dritte Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll @default: hsv

hsv-saturation

hsv-saturation(color/hsv):Number

Gibt den Sättigungswert einer Farbe im HSV-Farbraum zurück. Erwartet eine Farbe im rgb oder hsv Farbraum (color/hsv)

hsv-set-saturation

hsv-set-saturation(hsv, saturation, return-rgb-color: false):hsv/color

Setzt den Sättigungswert einer Farbe im HSV-Farbraum und gibt sie zurück.

Erwartet eine Farbe (color/hsv) und den zu setzenden Wert. Der dritte Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll @default: hsv

hsv-value

hsv-value(color/hsv):Number

Gibt den Helligkeitswert einer Farbe im HSV-Farbraum zurück. Erwartet eine Farbe im rgb oder hsv Farbraum (color/hsv)

hsv-set-value

hsv-set-value(hsv, value, return-rgb-color: false):hsv/color

Setzt den Helligkeitswert einer Farbe im HSV-Farbraum und gibt sie zurück.

Erwartet eine Farbe (color/hsv) und den zu setzenden Wert. Der dritte Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll @default: hsv

hsv-alpha

hsv-alpha(color/hsv):Number

Gibt den Opazitätswert einer Farbe im HSV-Farbraum zurück. Erwartet eine Farbe im rgb oder hsv Farbraum (color/hsv)

hsv-set-alpha

hsv-set-alpha(hsv, alpha, return-rgb-color: false):hsv/color

Setzt den Opazitätswert einer Farbe im HSV-Farbraum und gibt sie zurück.

Erwartet eine Farbe (color/hsv) und den zu setzenden Wert. Der dritte Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll @default: hsv

HSV modifikations Funktionen

hsv-invert

hsv-invert($hsv-color, $return-rgb-color: false):hsv/color

Invertiert alle Werte einer Farbe im HSV-Farbraum mit Ausnahme des Alphawertes.

Der zweite Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll @default: hsv

hsv-adjust-brightness

hsv-adjust-brightness(hsv, brightness-shift, return-rgb-color: false):hsv/color

Ändert den Helligkeitswert einer Farbe im HSV-Farbraum, ausgehend vom ursprünglichen Wert Der dritte Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll @default: hsv

hsv-adjust-hue

hsv-adjust-hue(hsv, hue-shift, return-rgb-color: false):hsv/color

Ändert den Farbton einer Farbe im HSV-Farbraum, ausgehend vom ursprünglichen Wert um die angegebenen Grad°. Der dritte Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll @default: hsv

hsv-adjust-saturation

hsv-adjust-saturation(hsv, saturation-shift, return-rgb-color: false):hsv/color

Ändert den Farbton einer Farbe im HSV-Farbraum, ausgehend vom ursprünglichen Wert um die angegebenen Grad°. Der dritte Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll @default: hsv

Weitere Funktionen

hsv-lighten

hsv-lighten($hsv-color, $value, $return-rgb-color: false):hsv/color

Erhöht die Helligkeit der Farbe.

hsv-darken

hsv-darken($hsv-color, $value, $return-rgb-color: false):hsv/color

Verringert die Helligkeit der Farbe.

hsv-saturate

hsv-saturate($hsv-color, $value, $return-rgb-color: false):hsv/color

hsv-adjust-desaturate

hsv-desaturate(hsv-color, value, return-rgb-color: false):hsv/color

Verringert die Sättigung der Farbe um den angegebenen Wert.

hsv-adjust-grayscale

hsv-grayscale($hsv-color, $return-rgb-color: false):hsv/color

Gibt die als reinen Grauwert zurück.

hsv-adjust-complement

hsv-complement($hsv-color, $return-rgb-color: false):hsv/color

Gibt die Komplementärfarbe zurück.