Sass farvefunktioner

Sass farvefunktioner

Vi opdeler Sass-farvefunktioner i tre dele: farvefunktioner til at sætte farver, farvefunktioner til at hente farver og farvefunktioner til at operere med farver:

Sass farvefunktion

Funktion Beskrivelse og eksempel
rgb(rød, grøn, blå)

Indstil farve ved hjælp af Red-Green-Blue (RGB) model
Angiv RGB-farveværdi ved hjælp af rgb(red, green, blue)
Hver parameter definerer styrken af farven, hvilket kan være et heltal mellem 0 og 255 eller en procentværdi (fra 0% til 100%)

Eksempel:

rgb(0, 0, 255);
// Viser sig som blå, fordi blue-parametren er sat til maksimal værdi (255), mens de andre parametre er sat til 0

rgba(rød, grøn, blå, alpha)

rgba(
Indstil farve ved hjælp af Red-Green-Blue-Alpha (RGBA)-modellen.
alpha HSLA-farveværdien er en udvidelse af HSL-farveværdien, med alpha-kanal - der specificerer farvens uigennemtrængelighed.

Eksempel:

RGBA-farveværdien er en udvidelse af RGB-farveværdien med alpha-kanal - der specificerer farvens uigennemtrængelighed.

rgba(0, 0, 255, 0.3); // Vises som blå med gennemsigtighednyans, sætning, lysstyrke)

hsl(
Indstil farve ved hjælp af Hue-Saturation-Lightness-modellen - og repræsenterer farvens cirkulære koordinatsystem.
Tone (tone) er en grad på farveterning (fra 0 til 360) - 0 eller 360 er rød, 120 er grøn, 240 er blå
Saturationsgrad (saturationsgrad) er en procentværdi; 0% betyder grå skygge, 100% betyder fuldfarvet.

Eksempel:

Lysstyrke (lysstyrke) er en procentværdi; 0% er sort, 100% er hvid.
hsl(120, 100%, 50%); // Grøn
hsl(120, 100%, 75%); // Let grøn
hsl(120, 100%, 25%); // Dyp grøn

hsl(120, 60%, 70%); // Let grønnyans, sætning, lysstyrke, alpha)

hsla(
Indstil farve ved hjælp af Hue-Saturation-Lightness-Alpha (HSLA)-modellen.
alpha HSLA-farveværdien er en udvidelse af HSL-farveværdien, med alpha-kanal - der specificerer farvens uigennemtrængelighed.

Eksempel:

Parameter er et tal mellem 0.0 (fuldstændig gennemsigtig) og 1.0 (fuldstændigt uigennemtrængelig).
hsl(120, 100%, 50%, 0.3); // Grøn med uigennemtrængelighed

hsl(120, 100%, 75%, 0.3); // Let grøn med uigennemtrængelighedcolor)

grayscale(

Eksempel:

Indstil gråtone med samme lysstyrke som farven.

grayscale(#7fffd4);

resultat: #c6c6c6color)

complement(

Eksempel:

Indstil farvesymmetri.

complement(#7fffd4);

resultat: #ff7faacolor, vægt)

invert(
vægtIndstil farvesymmetri eller negativ farve.

Eksempel:

Parameter er valgfri og skal være et tal mellem 0% og 100%. Standardværdien er 100%.

invert(white);

resultat: sort

Funktion Beskrivelse og eksempel
Sass farvefunktionshentningcolor)

red(

Eksempel:

Returner rød værdi af farve som et tal mellem 0 og 255.

red(#7fffd4);

resultat: 127

Resultat: 255

green(color)

Returner grøn værdi af farve som et tal mellem 0 og 255.

Eksempel:

green(#7fffd4);

Resultat: 255

grøn(blå);

Resultat: 0

blå(color)

Returner farves blå værdi som et tal mellem 0 og 255.

Eksempel:

blå(#7fffd4);

Resultat: 212

blå(blå);

Resultat: 255

nyans(color)

Returner farves nyans som et tal mellem 0grader og 360grader.

Eksempel:

nyans(#7fffd4);

Resultat: 160grader

sætning(color)

Returner farves HSL-sætning som et tal mellem 0% og 100%.

Eksempel:

sætning(#7fffd4);

Resultat: 100%

lysstyrke(color)

Returner farves HSL-lysstyrke som et tal mellem 0% og 100%.

Eksempel:

lysstyrke(#7fffd4);

Resultat: 74.9%

alpha(color)

Returner farves alpha-kanal som et tal mellem 0 og 1.

Eksempel:

alpha(#7fffd4);

Resultat: 1

opacity(color)

Returner farves alpha-kanal som et tal mellem 0 og 1.

Eksempel:

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

Resultat: 0.5

Sass-farveoperationsfunktioner

Funktion Beskrivelse og eksempel
mix(color1, color2, vægt)

Opret en blanding af farve 1 og farve 2.
vægt Parametrene skal være mellem 0% og 100%. Standardværdien er 50%.
En højere vægt betyder, at der skal bruges mere af color1.
En lavere vægt betyder, at der skal bruges mere af color2.

adjust-hue(color, grader)

Juster farveskyggen med -360 til 360 grader.

Eksempel:

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

Resultat: #8080ff

adjust-color(color, rød, grøn, blå, nyans, sætning, lysstyrke, alpha)

Juster en eller flere parametre med den angivne mængde.
Denne funktion tilføjer eller trækker den angivne mængde fra eksisterende farveværdier.

Eksempel:

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

Resultat:

change-color(color, rød, grøn, blå, nyans, sætning, lysstyrke, alpha)

Sæt en eller flere farveparametre til nye værdier.

Eksempel:

change-color(#7fffd4, rød: 255);

Resultat: #ffffd4

scale-color(color, rød, grøn, blå, sætning, lysstyrke, alpha) Skaler en eller flere farveparametre.
rgba(farve, alpha)

Opret en ny farve ved hjælp af den givne alpha-kanal.

Eksempel:

rgba(#7fffd4, 30%);

Resultat: rgba(127, 255, 212, 0.3)

lighten(color, amount) Opret lysere farver ved at bruge en mængde mellem 0% og 100%.
amount Parametrene øges i HSL-lysstyrke efter procent.
darken(color, amount) Opret dybere farver ved at bruge en mængde mellem 0% og 100%.
amount Parametrene nedsættes i HSL-lysstyrke efter procent.
saturate(color, amount) Opret mere saturlige farver ved at bruge en mængde mellem 0% og 100%.
amount Parametrene øges i HSL-saturation efter procent.
desaturate(color, amount) Opret farver med lavere saturation ved at bruge en mængde mellem 0% og 100%.
amount Parametrene nedsættes i HSL-saturation efter procent.
opacify(color, amount) Opret mindre gennemsigtige farver ved at bruge en værdi mellem 0 og 1.
amount Parametrene øges i alpha-kanalen efter deres værdi.
fade-in(color, amount) Opret mindre gennemsigtige farver ved at bruge en værdi mellem 0 og 1.
amount Parametrene nedsættes i alpha-kanalen efter deres værdi.
transparentize(color, amount) Opret mere gennemsigtige farver ved at bruge en værdi mellem 0 og 1.
amount Parametrene nedsættes i alpha-kanalen efter deres værdi.
fade-out(color, amount) Opret mere gennemsigtige farver ved at bruge en værdi mellem 0 og 1.
amount Parametrene øges i alpha-kanalen efter deres værdi.