Sass-Farbfunktionen

Sass 函数Sass-Funktionen

Sass-Farbfunktionen lassen sich in drei Teile unterteilen: Farbeinstellungen, Farbabruf und Farboperationen.

Die folgende Tabelle listet die Farbfunktionen von Sass auf:

Sass-Farbeinstellungen

Funktion Beschreibung & Beispiele
rgb(red, green, blue) Erstellt eine Rot-Grün-Blau-Farbe (RGB). R steht für "Rot", G für "Grün" und B für "Blau".

Beispiel:
rgb(0, 0, 255);
rgba(red, green, blue, alpha) Erstelle eine Farbe aus Rot-, Grün-, Blau- und Alpha-Werten.

Beispiel:
rgba(0, 0, 255, 0.3);
hsl(Farbton, Sättigung, Helligkeit) Erstelle eine Farbe aus Farbton-, Sättigungs- und Helligkeitswerten.

Beispiel:
hsl(120, 100%, 50%); // grün
hsl(120, 100%, 75%); // hellgrün
hsl(120, 100%, 25%); // dunkelgrün
hsl(120, 60%, 70%); // zartes Grün
hsla(Farbton, Sättigung, Helligkeit, Alpha) Erstelle eine Farbe aus Farbton-, Sättigungs-, Helligkeits- und Alpha-Werten.

Beispiel:
hsl(120, 100%, 50%, 0.3); // grün mit Transparenz
hsl(120, 100%, 75%, 0.3); // hellgrün mit Transparenz
grayscale(color) Wandelt eine Farbe in Graustufen um, äquivalent zu desaturate( color,100%).

Beispiel:
grayscale(#7FBFFF);
Ergebnis: #c6c6c6
complement(color) Gibt eine Komplementärfarbe zurück, äquivalent zu adjust-hue($color,180deg).

Beispiel:
complement(#7FBFFF);
Ergebnis: #ff7faa
invert(color, weight) Gibt eine invertierte Farbe zurück, wobei die Rot-, Grün- und Blauwerte umgekehrt und der Alphawert unverändert bleibt.

Beispiel:
invert(white);
Ergebnis: black

Sass-Farbabruf

Funktion Beschreibung & Beispiele
red(color) Ruft den Rotwert (0-255) aus einer Farbe ab.

Beispiel:
red(#7FBFFF);
Ergebnis: 127
red(red);
Ergebnis: 255
green(color) Ruft den Grünwert (0-255) aus einer Farbe ab.

Beispiel:
green(#7FBFFF);
Ergebnis: 255
green(blue);
Ergebnis: 0
blue(color) Ermittelt den Blauwert (0-255) einer Farbe.

Beispiel:
blue(#7FBFFF);
Ergebnis: 212
blue(blue);
Ergebnis: 255
hue(color) Gibt den Farbtonwinkel einer Farbe im HSL-Farbraum zurück (0deg - 255deg).

Beispiel:
hue(#7FBFFF);
Ergebnis: 160deg
saturation(color) Ermittelt den Sättigungswert (0% - 100%) einer Farbe.

Beispiel:
saturation(#7FBFFF);
Ergebnis: 100%
lightness(color) Ermittelt den Helligkeitswert (0% - 100%) einer Farbe.

Beispiel:
lightness(#7FBFFF);
Ergebnis: 74.9%
alpha(color) Gibt den Alpha-Kanal von color als Zahl zwischen 0 und 1 zurück.

Beispiel:
alpha(#7FBFFF);
Ergebnis: 1
opacity(color) Ermittelt den Alpha-Wert (Transparenz) (0-1) einer Farbe.

Beispiel:
opacity(rgba(127, 191, 255, 0.5);
Ergebnis: 0.5

Sass-Farboperationen

Funktion Beschreibung & Beispiele
mix(color1, color2, weight) Mischt zwei Farben miteinander.weightDer weight-Parameter muss zwischen 0% und 100% liegen. Der Standardwert für weight ist 50%, was bedeutet, dass die neue Farbe 50% von color1 und 50% von color2 annimmt. Wenn weight 25% beträgt, bedeutet das, dass die neue Farbe 25% color1 und 75% color2 enthält.
adjust-hue(color, degrees) Erzeugt eine neue Farbe, indem der Farbtonwert einer Farbe geändert wird (-360deg - 360deg).

Beispiel:
adjust-hue(#7FBFFF, 80deg);
Ergebnis: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) Diese Funktion kann einen oder mehrere Attributwerte einer gegebenen Farbe anpassen, einschließlich der verschiedenen Farbwertparameter von RGB- und HSL-Farben sowie des Alpha-Kanal-Werts. Diese Anpassungen hängen von den übergebenen Schlüsselwortparametern ab, die zu den entsprechenden Farbwerten der gegebenen Farbe addiert oder von ihnen subtrahiert werden.

Beispiel:
adjust-color(#7FBFFF, blue: 25);
Ergebnis:
change-color(color, red, green, blue, hue, saturation, lightness, alpha) Ähnlich wie adjust-color oben, außer dass die an diese Funktion übergebenen Parameter die ursprünglichen Werte direkt ersetzen, ohne arithmetische Operationen.

Beispiel:
change-color(#7FBFFF, red: 255);
Ergebnis: #ffffd4
scale-color(color, red, green, blue,  saturation, lightness, alpha) Eine weitere praktische Funktion zur Farbanpassung. adjust-color addiert einfach zu den eigenen Wertparametern der Farbe hinzu oder subtrahiert davon, indem sie die übergebenen Argumente verwendet, was manchmal dazu führen kann, dass akkumulierte Werte überlaufen; natürlich hält die Funktion das Ergebnis innerhalb gültiger Schwellenwerte. Die Funktion scale-color vermeidet diese Situation und ermöglicht es, Parameter effektiv innerhalb der Schwellenwerte anzupassen, ohne sich um Überläufe sorgen zu müssen.

Zum Beispiel liegt der Helligkeitswert einer Farbe zwischen 0% und 100%. Wenn scale-color($color, $lightness: 40%) ausgeführt wird, bedeutet das, dass die Helligkeit der Farbe um (100 - ursprünglicher Wert) × 40% zunimmt.

Ein weiteres Beispiel: Das Ausführen von scale-color($color, $lightness: -40%) bedeutet, dass die Helligkeit der Farbe um (ursprünglicher Wert - 0) × 40% abnimmt.

Alle Parameterwerte müssen zwischen 0% und 100% liegen, und RGB- und HSL-Parameter dürfen nicht in Konflikt stehen.

scale-color(hsl(120, 70%, 80%), $lightness: 50%) => hsl(120, 70%, 90%)
scale-color(rgb(200, 150, 170), $green: -40%, $blue: 70%) => rgb(200, 90, 229)
scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) => hsla(200, 7%, 80%, 0.7)
rgba(color, alpha) Erstelle eine Farbe aus Rot-, Grün-, Blau- und Alpha-Werten.

Beispiel:
rgba(#7FBFFF, 30%);
Ergebnis: rgba(127, 191, 255, 0.3)
lighten(color, amount) Erzeuge eine neue Farbe, indem du den Helligkeitswert (0% - 100%) einer Farbe erhöhst, um sie heller zu machen.
darken(color, amount) Erzeuge eine neue Farbe, indem du den Helligkeitswert (0% - 100%) einer Farbe verringerst, um sie dunkler zu machen.
saturate(color, amount) Erhöhe die Sättigung einer gegebenen Farbe. Entspricht adjust-color( color, saturation: amount)
desaturate(color, amount) Verringere die Sättigung einer Farbe, um einen neuen Farbwert zu erzeugen. Der Sättigungswertbereich ist wieder 0% ~ 100%. Entspricht adjust-color(color, saturation: -amount)
opacify(color, amount) Verringere die Transparenz einer Farbe, mit Werten zwischen 0-1. Entspricht adjust-color(color, alpha: amount)
fade-in(color, amount) Verringere die Transparenz einer Farbe, mit Werten zwischen 0-1. Entspricht adjust-color(color, alpha: amount)
transparentize(color, amount) Erhöht die Transparenz einer Farbe, mit Werten zwischen 0-1. Entspricht adjust-color(color, alpha: -amount)
fade-out(color, amount) Erhöht die Transparenz einer Farbe, mit Werten zwischen 0-1. Entspricht adjust-color(color, alpha: -amount)

Sass 函数Sass-Funktionen

Andere Erweiterungen