Sass farvefunktioner
- Forrige side Sass introspektion
- Næste side Sass vejledning
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 Eksempel:rgb(0, 0, 255); |
rgba(rød, grøn, blå, alpha) |
rgba( 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( Eksempel:
Lysstyrke (lysstyrke) er en procentværdi; 0% er sort, 100% er hvid. |
hsl(120, 60%, 70%); // Let grønnyans, sætning, lysstyrke, alpha) |
hsla( Eksempel:
Parameter er et tal mellem 0.0 (fuldstændig gennemsigtig) og 1.0 (fuldstændigt uigennemtrængelig). |
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( 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. |
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. 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. |
- Forrige side Sass introspektion
- Næste side Sass vejledning