Sass väritfunktiot

Sass väritfunktiot

Jakoimme Sassin värifunktiot kolmeen osaan: väriasetusfunktiot, värihakufunktiot ja värioperointifunktiot:

Sass-värifunktiot

Funktio Kuvaus ja esimerkki
rgb(punainen, vihreä, sininen)

Aseta väri Red-Green-Blue (RGB) -mallin avulla
Määritä RGB-väriarvo rgb(red, green, blue)
Jokainen parametri määrittää väriintensiteetin, joka voi olla kokonaisluku 0-255 välillä tai prosenttiosuus (0% - 100%)

实例：

rgb(0, 0, 255);
// Esitetään sinisellä, koska blue-parametrin arvo on asetettu korkeimmaksi (255), muiden parametrien arvot 0
rgba(punainen, vihreä, sininen, alpha)

Asettaa väriä Red-Green-Blue-Alpha (RGBA) -mallin avulla.
RGBA-väriarvo on RGB-väriarvon laajennus, joka sisältää alpha-kanavan - tämä kanava määrittää väriäsiävyttymisen.
alpha Parametrit ovat välillä 0.0 (täysin läpinäkyvä) ja 1.0 (täysin peittävä) numeroa.

实例：

rgba(0, 0, 255, 0.3); // Näyttää läpinäkyvän sinisen
hsl(kirkkaus, saturaatio, valoisuus)

Asettaa väriä Hue-Saturation-Lightness -mallin avulla - ja edustaa väriä särmäkoordinaateissa.
Kirkkaus (hue) on sävykehän aste (0-360) - 0 tai 360 on punainen, 120 on vihreä, 240 on sininen
Kylläisyys (saturaatio) on prosenttiosuus; 0% on harmaa varjo, 100% on täysiväri.
Valoisuus (valoisuus) on prosenttiosuus; 0% on musta, 100% on valkoinen.

实例：

hsl(120, 100%, 50%); // Vihreä
hsl(120, 100%, 75%); // Hävinäinen vihreä
hsl(120, 100%, 25%); // Syvä vihreä
hsl(120, 60%, 70%); // Heikko vihreä

hsla(kirkkaus, saturaatio, valoisuus, alpha)

Asettaa väriä Hue-Saturation-Lightness-Alpha (HSLA) -mallin avulla.
HSLA-väriarvo on HSL-väriarvon laajennus, joka sisältää alpha-kanavan - tämä kanava määrittää väriäsiävyttymisen.
alpha Parametrit ovat välillä 0.0 (täysin läpinäkyvä) ja 1.0 (täysin peittävä) numeroa.

实例：

hsl(120, 100%, 50%, 0.3); // Vihreä läpinäkyvyydellä
hsl(120, 100%, 75%, 0.3); // Hävinäinen vihreä läpinäkyvyydellä

grayscale(color)

Asettaa saman valaistuksen omaavan harmaavärin.

实例：

grayscale(#7fffd4);

Tulos: #c6c6c6
complement(color)

Asettaa väriä sen komplementiksi.

实例：

complement(#7fffd4);

Tulos: #ff7faa
invert(color, weight)

Asettaa väriä käänteisväriksi tai negatiiviseksi.
weightParametrit ovat valinnaisia, ne täytyy olla välillä 0% ja 100% numerona. Oletusarvo on 100%.

实例：

invert(white);

Tulos: musta

Sass värihaun funktio

Funktio Kuvaus ja esimerkki
red(color)

Palauttaa väriä punaisen arvon numerona väliltä 0-255.

实例：

red(#7fffd4);

Tulos: 127

red(red);

Tulos: 255
green(color)

Palauttaa väriä vihreän arvon numerona väliltä 0-255.

实例：

green(#7fffd4);

Tulos: 255

vihreä(sininen);

Tulos: 0
sininen(color)

Palauttaa väriä sinisen arvon numerona välillä 0 ja 255.

实例：

sininen(#7fffd4);

Tulos: 212

sininen(sininen);

Tulos: 255
kirkkaus(color)

Palauttaa väriä HSL-kirkkauden arvon numerona välillä 0deg ja 360deg.

实例：

kirkkaus(#7fffd4);

Tulos: 160deg
saturaatio(color)

Palauttaa väriä HSL-saturaation arvon numerona välillä 0% ja 100%.

实例：

saturaatio(#7fffd4);

Tulos: 100%
valoisuus(color)

Palauttaa väriä HSL-valoisuuden arvon numerona välillä 0% ja 100%.

实例：

valoisuus(#7fffd4);

Tulos: 74.9%
alpha(color)

Palauttaa väriä Alpha-kanavan arvon numerona välillä 0 ja 1.

实例：

alpha(#7fffd4);

Tulos: 1
opacity(color)

Palauttaa väriä Alpha-kanavan arvon numerona välillä 0 ja 1.

实例：

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

Tulos: 0.5

Sassin värioperation funktiot

Funktio Kuvaus ja esimerkki
mix(color1, color2, weight)

Luo värimykimys väristä 1 ja 2.
weight Parametrit täytyy olla välillä 0% ja 100%. Oletusarvo on 50%.
Suurempi painoarvo tarkoittaa, että tulisi käyttää enemmän color1.
Pienempi painoarvo tarkoittaa, että tulisi käyttää enemmän color2.

adjust-hue(color, asteet)

Mukauta väriä -360 asteesta 360 asteeseen asti asteina.

实例：

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

Tulos: #8080ff
adjust-color(color, punainen, vihreä, sininen, kirkkaus, saturaatio, valoisuus, alpha)

Mukauta yksiä tai useita parametreja määritetyn määrän suhteen.
Tämä funktio lisää tai vähentää olemassa olevista väriarvoista määritetyn määrän.

实例：

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

Tulos:
change-color(color, punainen, vihreä, sininen, kirkkaus, saturaatio, valoisuus, alpha)

Aseta väriparametrit uusiin arvoihin.

实例：

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

Tulos: #ffffd4
scale-color(color, punainen, vihreä, sininen, saturaatio, valoisuus, alpha) Skaalaa yksi tai useita väriparametreja.
rgba(väri, alpha)

Luo uusi väri annetun alpha-kanavan avulla.

实例：

rgba(#7fffd4, 30%);

Result: rgba(127, 255, 212, 0.3)
Esimerkki：color, amount) rgba(#7fffd4, 30%);
amount Tulos: rgba(127, 255, 212, 0.3)
lighten(color, amount) Parametrit nousevat HSL-valon prosentteina.
amount darken(
Parametrit laskevat HSL-valon prosentteina.color, amount) saturate(
amount Parametrit nousevat HSL-satuvuuden prosentteina.
desaturate(color, amount) Luo vähemmän satuvia värejä käyttämällä määrää välillä 0% ja 100%.
amount Parametrit laskevat HSL-satuvuuden prosentteina.
opacify(color, amount) Luo vähemmän läpinäkyviä värejä käyttämällä lukua välillä 0 ja 1.
amount Parametrit nousevat arvonsa Alpha-kanavalla.
fade-in(color, amount) Luo vähemmän läpinäkyviä värejä käyttämällä lukua välillä 0 ja 1.
amount Parametrit laskevat Alpha-kanavan arvoa.
transparentize(color, amount) Luo läpinäkyvämpiä värejä käyttämällä lukua välillä 0 ja 1.
amount Parametrit laskevat Alpha-kanavan arvoa.
fade-out(color, amount) Luo läpinäkyvämpiä värejä käyttämällä lukua välillä 0 ja 1.
amount Parametrit nousevat arvonsa Alpha-kanavalla.