Sass-Farbfunktionen

Sass-Farbfunktionen

Wir teilen die Farbenfunktionen in Sass in drei Teile ein: Farbfunktionen festlegen, Farbfunktionen abrufen und Farbfunktionen verarbeiten:

Sass-Farbfunktion

Sass-Farboperationsfunktionen Funktion
rgb(Rot, Grün, Blau)

Farben werden mit dem Red-Green-Blue (RGB)-Modell eingestellt.
RGB-Farbwerte werden durch rgb(red, green, blue) angegeben.
Jeder Parameter definiert die Intensität der Farbe, was eine Ganzzahl zwischen 0 und 255 oder einen Prozentsatz (von 0% bis 100%) sein kann.

Beispiel:

rgb(0, 0, 255);
// Die Farbe wird blau dargestellt, da der blue-Parameter auf den höchsten Wert (255) gesetzt ist und die anderen Parameter auf 0 gesetzt sind
rgba(Rot, Grün, Blau, Alpha)

Setzt die Farbe mit dem Red-Green-Blue-Alpha (RGBA)-Modell.
Der RGBA-Farbwert ist eine Erweiterung des RGB-Farbwerts, der Alpha-Kanal hat - dieser Kanal gibt die Transparenz der Farbe an.
Alpha Der Parameter ist eine Zahl zwischen 0.0 (vollständig transparent) und 1.0 (vollständig undurchsichtig).

Beispiel:

rgba(0, 0, 255, 0.3); // Als durchsichtiges Blau dargestellt
hsl(Farbton, Sättigung, Helligkeit)

Setzt die Farbe mit dem Hue-Saturation-Lightness-Modell - und repräsentiert die zylindrische Koordinatenform der Farbe.
Hue (Farbton) ist der Grad auf dem Farbtonring (von 0 bis 360) - 0 oder 360 ist Rot, 120 ist Grün, 240 ist Blau
Sättigung (Sättigung) ist ein Prozentsatz; 0% bedeutet Grauschattierung, 100% bedeutet Vollfarbe.
Helligkeit (Licht) ist ein Prozentsatz; 0% ist schwarz, 100% ist weiß.

Beispiel:

hsl(120, 100%, 50%); // Grün
hsl(120, 100%, 75%); // Pastellgrün
hsl(120, 100%, 25%); // Dunkelgrün
hsl(120, 60%, 70%); // Hellgrün

hsla(Farbton, Sättigung, Helligkeit, Alpha)

Setzt die Farbe mit dem Hue-Saturation-Lightness-Alpha (HSLA)-Modell.
Der HSLA-Farbwert ist eine Erweiterung des HSL-Farbwerts, der Alpha-Kanal hat - der gibt die Transparenz der Farbe an.
Alpha Der Parameter ist eine Zahl zwischen 0.0 (vollständig transparent) und 1.0 (vollständig undurchsichtig).

Beispiel:

hsl(120, 100%, 50%, 0.3); // Durchsichtiges Grün
hsl(120, 100%, 75%, 0.3); // Durchsichtige Pastellgrün

grayscale(color)

Setzt eine Graustufe mit der gleichen Helligkeit wie die Farbe.

Beispiel:

grayscale(#7fffd4);

Ergebnis: #c6c6c6
komplement(color)

Setzt die Komplementärfarbe der Farbe.

Beispiel:

komplement(#7fffd4);

Ergebnis: #ff7faa
invert(color, Erstellen Sie eine Mischfarbe aus Farbe 1 und Farbe 2.)

Setzt die Kontrastfarbe oder die Negativfarbe der Farbe.
Erstellen Sie eine Mischfarbe aus Farbe 1 und Farbe 2.Der Parameter ist optional und muss eine Zahl zwischen 0% und 100% sein. Standardwert ist 100%.

Beispiel:

invert(weiß);

Ergebnis: schwarz

Sass-Farbeingabefunktion

Sass-Farboperationsfunktionen Funktion
rot(color)

Gibt die rote Farbkomponente als Zahl zwischen 0 und 255 zurück.

Beispiel:

rot(#7fffd4);

Ergebnis: 127

rot(rot);

blau(blau);
grün(color)

Gibt die grüne Farbkomponente als Zahl zwischen 0 und 255 zurück.

Beispiel:

grün(#7fffd4);

blau(blau);

green(blue);

grün(blau);
Ergebnis: 0color)

blau(

Beispiel:

Geben Sie den Blauwert des Farbs als Zahl zwischen 0 und 255 zurück.

blau(#7fffd4);

Ergebnis: 212

blau(blau);
Ergebnis: 255color)

Farbton(

Beispiel:

Geben Sie den Farbton des Farbs als Zahl zwischen 0deg und 360deg zurück.

Farbton(#7fffd4);
Ergebnis: 160degcolor)

Sättigung(

Beispiel:

Geben Sie die Sättigung des Farbs als Zahl zwischen 0% und 100% zurück.

Sättigung(#7fffd4);
Ergebnis: 100%color)

Helligkeit(

Beispiel:

Geben Sie die Helligkeit des Farbs als Zahl zwischen 0% und 100% zurück.

Helligkeit(#7fffd4);
Ergebnis: 74.9%color)

opacity(

Beispiel:

alpha(

alpha(#7fffd4);
Ergebnis: 1color)

opacity(

Beispiel:

Geben Sie die Alpha-Kanal des Farbs mit einem Wert zwischen 0 und 1 zurück.

opacity(rgba(127, 255, 212, 0.5));

Ergebnis: 0.5

Sass-Farboperationsfunktionen Funktion
Beschreibung & BeispielEine höhere Gewichtung bedeutet, dass mehr, color2, Erstellen Sie eine Mischfarbe aus Farbe 1 und Farbe 2.)

mix(
Erstellen Sie eine Mischfarbe aus Farbe 1 und Farbe 2. Gewichtung
Die Parameter müssen zwischen 0% und 100% liegen. Standardwert ist 50%. Eine höhere Gewichtung bedeutet, dass mehr.
Eine geringere Gewichtung bedeutet, dass mehr color2.

adjust-hue(color, Grad)

Passen Sie die Farbtonnuance in Grad von -360 bis 360 an.

Beispiel:

adjust-hue(#7fffd4, 80deg);

Ergebnis: #8080ff
adjust-color(color, Rot, Grün, Blau, Farbton, Sättigung, Helligkeit, Alpha)

Passen Sie einen oder mehrere Parameter um die angegebene Menge an.
Diese Funktion fügt oder subtrahiert die angegebene Menge zu den bestehenden Farbvalues hinzu.

Beispiel:

adjust-color(#7fffd4, blau: 25);

Ergebnis:
change-color(color, Rot, Grün, Blau, Farbton, Sättigung, Helligkeit, Alpha)

Setzen Sie einen oder mehrere Farbparameter auf neue Werte.

Beispiel:

change-color(#7fffd4, rot: 255);

Ergebnis: #ffffd4
scale-color(color, Rot, Grün, Blau, Sättigung, Helligkeit, Alpha) Skalieren Sie einen oder mehrere Farbparameter.
rgba(Farbe, Alpha)

Erstellen Sie neue Farben mit dem gegebenen Alpha-Kanal.

Beispiel:

rgba(#7fffd4, 30%);

Ergebnis: rgba(127, 255, 212, 0.3)
lighten(color, amount) Erstellen Sie durch Verwendung eines Wertes zwischen 0% und 100% helleren Farben.
amount Die Parameter erhöhen den HSL-Helligkeitswert in Prozent.
darken(color, amount) Erstellen Sie durch Verwendung eines Wertes zwischen 0% und 100% dunklere Farben.
amount Die Parameter verringern den HSL-Helligkeitswert in Prozent.
saturate(color, amount) Erstellen Sie durch Verwendung eines Wertes zwischen 0% und 100% gesättigtere Farben.
amount Die Parameter erhöhen den HSL-Sättigungswert in Prozent.
desaturate(color, amount) Erstellen Sie durch Verwendung eines Wertes zwischen 0% und 100% weniger gesättigte Farben.
amount Die Parameter verringern den HSL-Sättigungswert in Prozent.
opacify(color, amount) Erstellen Sie durch Verwendung einer Zahl zwischen 0 und 1 weniger transparente Farben.
amount Die Parameter erhöhen den Alpha-Kanal gemäß ihrem Wert.
fade-in(color, amount) Erstellen Sie durch Verwendung einer Zahl zwischen 0 und 1 weniger transparente Farben.
amount Die Parameter verringern den Alpha-Kanal gemäß ihrem Wert.
transparentize(color, amount) Erstellen Sie durch Verwendung einer Zahl zwischen 0 und 1 transparentere Farben.
amount Die Parameter verringern den Alpha-Kanal gemäß ihrem Wert.
fade-out(color, amount) Erstellen Sie durch Verwendung einer Zahl zwischen 0 und 1 transparentere Farben.
amount Die Parameter erhöhen den Alpha-Kanal gemäß ihrem Wert.