Sass Kleur Functies

Sass Kleur Functies

We verdelen de kleurfuncties in Sass in drie delen: kleurfuncties instellen, kleurfuncties ophalen en kleurfuncties manipuleren:

Sass kleurfunctie instellen

Functie Beschrijving & voorbeeld
rgb(rood, groen, blauw)

Stel de kleur in met het Red-Green-Blue (RGB) model.
Specificeer de RGB-kleurgeFilterWhere met rgb(red, green, blue).
Elke parameter definieert de intensiteit van de kleur, wat een geheel getal tussen 0 en 255 kan zijn, of een percentage (van 0% tot 100%).

Voorbeeld:

rgb(0, 0, 255);
// Wordt weergegeven in blauw, omdat de waarde van de parameter blue is ingesteld op het hoogste niveau (255), en de andere parameters zijn ingesteld op 0
rgba(rood, groen, blauw, alpha)

Stel de kleur in met het Red-Green-Blue-Alpha (RGBA) model.
De RGBA kleurwaarde is een uitbreiding van de RGB kleurwaarde, met een alpha kanaal - dat de ondoorzichtigheid van de kleur specificeert.
alpha De parameter is een getal tussen 0.0 (volledig transparant) en 1.0 (volledig ondoorzichtig).

Voorbeeld:

rgba(0, 0, 255, 0.3); // Weergegeven als blauw met doorzichtigheid
hsl(kleurtoon, verzadiging, lichting)

Stel de kleur in met het Hue-Saturation-Lightness model - en vertegenwoordigt de cilindrische coördinaten van de kleur.
Hue (tint) is een graad op de kleurenwiel (van 0 tot 360) - 0 of 360 is rood, 120 is groen, 240 is blauw
Saturation (saturatie) is een percentage; 0% betekent grijs schaduw, 100% betekent volledig kleur.
Lightness (helderheid) is ook een percentage; 0% is zwart, 100% is wit.

Voorbeeld:

hsl(120, 100%, 50%); // Groen
hsl(120, 100%, 75%); // Lichtgroen
hsl(120, 100%, 25%); // Diepgroen
hsl(120, 60%, 70%); // Lichtgroen

hsla(kleurtoon, verzadiging, lichting, alpha)

Stel de kleur in met het Hue-Saturation-Lightness-Alpha (HSLA) model.
De HSLA kleurwaarde is een uitbreiding van de HSL kleurwaarde, met een alpha kanaal - dat de ondoorzichtigheid van de kleur specificeert.
alpha De parameter is een getal tussen 0.0 (volledig transparant) en 1.0 (volledig ondoorzichtig).

Voorbeeld:

hsl(120, 100%, 50%, 0.3); // Groen met ondoorzichtigheid
hsl(120, 100%, 75%, 0.3); // Lichtgroen met ondoorzichtigheid

grayscale(color)

Stel een grijs met dezelfde helderheid als de kleur in.

Voorbeeld:

grayscale(#7fffd4);

Resultaat: #c6c6c6
complement(color)

Stel de complementaire kleur van de kleur in.

Voorbeeld:

complement(#7fffd4);

Resultaat: #ff7faa
invert(color, gewicht)

Stel de inversie of negatieve kleur van de kleur in.
gewichtDe parameter is optioneel en moet een getal tussen 0% en 100% zijn. De standaardwaarde is 100%.

Voorbeeld:

invert(white);

Resultaat: black

Sass kleur functie

Functie Beschrijving & voorbeeld
red(color)

Return de rode waarde van de kleur met een getal tussen 0 en 255.

Voorbeeld:

red(#7fffd4);

Resultaat: 127

red(red);

Resultaat: 255
green(color)

Return de groene waarde van de kleur met een getal tussen 0 en 255.

Voorbeeld:

green(#7fffd4);

Resultaat: 255

groen(blauw);

Resultaat: 0
blauw(color)

Geef een cijfer terug tussen 0 en 255 voor de blauwe waarde van de kleur.

Voorbeeld:

blauw(#7fffd4);

Resultaat: 212

blauw(blauw);

Resultaat: 255
kleurtoon(color)

Geef een cijfer terug in graden tussen 0deg en 360deg voor de kleurtoon van de kleur.

Voorbeeld:

kleurtoon(#7fffd4);

Resultaat: 160deg
verzadiging(color)

Geef een cijfer terug in percentages tussen 0% en 100% voor de HSL-satürlichheid van de kleur.

Voorbeeld:

verzadiging(#7fffd4);

Resultaat: 100%
lichting(color)

Geef een cijfer terug in percentages tussen 0% en 100% voor de HSL-brightness van de kleur.

Voorbeeld:

lichting(#7fffd4);

Resultaat: 74.9%
alpha(color)

Geef een cijfer tussen 0 en 1 terug voor het Alpha-kanaal van de kleur.

Voorbeeld:

alpha(#7fffd4);

Resultaat: 1
opacity(color)

Geef een cijfer tussen 0 en 1 terug voor het Alpha-kanaal van de kleur.

Voorbeeld:

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

Resultaat: 0.5

Sass-kleuroperatiefuncties

Functie Beschrijving & voorbeeld
mix(kleur1, color2, gewicht)

Maak een gemengde kleur van kleur 1 en kleur 2.
gewicht de parameters moeten tussen 0% en 100% liggen. De standaardwaarde is 50%.
Een hogere gewichtsklasse betekent dat meer kleur1.
Een lagere gewichtsklasse betekent dat meer color2.

adjust-hue(color, graden)

Pas de kleurtoon aan in graden van -360 tot 360.

Voorbeeld:

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

Resultaat: #8080ff
adjust-color(color, rood, groen, blauw, kleurtoon, verzadiging, lichting, alpha)

Pas een of meerdere parameters aan met de opgegeven hoeveelheid.
Deze functie voegt of trekt een bepaalde hoeveelheid toe aan bestaande kleurwaarden.

Voorbeeld:

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

Resultaat:
change-color(color, rood, groen, blauw, kleurtoon, verzadiging, lichting, alpha)

Stel een of meerdere kleurparameters in op nieuwe waarden.

Voorbeeld:

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

Resultaat: #ffffd4
scale-color(color, rood, groen, blauw, verzadiging, lichting, alpha) Zoom een of meerdere kleurparameters in.
rgba(kleur, alpha)

Maak een nieuwe kleur met de gegeven alpha-kanaal.

Voorbeeld:

rgba(#7fffd4, 30%);

Resultaat: rgba(127, 255, 212, 0.3)
lighten(color, amount) Maak een lichte kleur met een hoeveelheid tussen 0% en 100%.
amount Parameters worden verhoogd naar de HSL亮度百分比。
darken(color, amount) Maak een diepere kleur met een hoeveelheid tussen 0% en 100%.
amount Parameters worden verlaagd naar de HSL亮度百分比。
saturate(color, amount) Maak een meer gesatureerde kleur met een hoeveelheid tussen 0% en 100%.
amount Parameters worden verhoogd naar de HSL饱和度百分比。
desaturate(color, amount) Maak een minder gesatureerde kleur met een hoeveelheid tussen 0% en 100%.
amount Parameters worden verlaagd naar de HSL饱和度百分比。
opacify(color, amount) Maak een minder doorzichtig kleur met een getal tussen 0 en 1.
amount Parameters worden verhoogd naar de Alpha-kanaalwaarde.
fade-in(color, amount) Maak een minder doorzichtig kleur met een getal tussen 0 en 1.
amount Parameters worden verlaagd naar de Alpha-kanaalwaarde.
transparentize(color, amount) Maak een transparantere kleur met een getal tussen 0 en 1.
amount Parameters worden verlaagd naar de Alpha-kanaalwaarde.
fade-out(color, amount) Maak een transparantere kleur met een getal tussen 0 en 1.
amount Parameters worden verhoogd naar de Alpha-kanaalwaarde.