Sass Rang Funktsiyalari
Sass rang funktsiyalari uch qismga bo'lingan: Rang o'rnatish funktsiyalari, Rang olish funktsiyalari va Rangni manipulyatsiya qilish funktsiyalari.
Sass Rang O'rnatish Funktsiyalari
| Funktsiya | Tavsif va Misol |
|---|---|
rgb(red, green, blue) | Rangni Qizil-Yashil-Ko'k (RGB) modeli yordamida o'rnatadi. RGB rang qiymati: rgb(red, green, blue). Har bir parametr rangning intensivligini belgilaydi va 0 dan 255 gacha bo'lgan butun son yoki foiz qiymati (0% dan 100% gacha) bo'lishi mumkin. |
Misol: rgb(0, 0, 255); | Natija: ko'k (blue) (ko'k parametr eng yuqori qiymatga (255) o'rnatilgan va boshqalari 0) |
rgba(red, green, blue, alpha) | Rangni Qizil-Yashil-Ko'k-Alpha (RGBA) modeli yordamida o'rnatadi. RGBA rang qiymatlari RGB rang qiymatlarining alpha kanalini qo'shadi - bu rangning shaffofligini belgilaydi. Alpha parametri 0.0 (to'liq shaffof) dan 1.0 (to'liq o'qlangan) gacha bo'lishi mumkin. |
Misol: rgba(0, 0, 255, 0.3); | Natija: shaffof ko'k rang |
hsl(hue, saturation, lightness) | Rangni Rang-Toyinish-Yorqinlik (HSL) modeli yordamida o'rnatadi - va ranglarning silindrik-koordinat ko'rsatmalarini ifodalaydi. Hue - rang g'ildiragida bir daraja (0 dan 360 gacha) - 0 yoki 360 qizil, 120 yashil, 240 ko'k. Saturation - foiz qiymati; 0% kul rangni anglatadi va 100% to'liq rangni. Lightness - foiz qiymati; 0% qora, 100% oq. |
Misol: hsl(120, 100%, 50%); | Natija: yashil |
Misol: hsl(120, 100%, 75%); | Natija: och yashil |
Misol: hsl(120, 100%, 25%); | Natija: qora yashil |
Misol: hsl(120, 60%, 70%); | Natija: pastel yashil |
hsla(hue, saturation, lightness, alpha) | Rangni Hue-Toyinish-Yorqinlik-Alpha (HSLA) modeli yordamida o'rnatadi. HSLA rang qiymatlari HSL rang qiymatlarining alpha kanalini qo'shadi - bu rangning shaffofligini belgilaydi. Alpha parametri 0.0 (to'liq shaffof) dan 1.0 (to'liq o'qlangan) gacha bo'lishi mumkin. |
Misol: hsl(120, 100%, 50%, 0.3); | Natija: shaffof yashil |
Misol: hsl(120, 100%, 75%, 0.3); | Natija: och yashil shaffof |
grayscale(color) | Rangni xuddi shu yorqinlikdagi kul rangga o'rnatadi. |
Misol: grayscale(#7fffd4); | Natija: #c6c6c6 |
complement(color) | Rangning qarama-qarshi rangini o'rnatadi. |
Misol: complement(#7fffd4); | Natija: #ff7faa |
invert(color, weight) | Rangning teskari yoki salbiy rangini o'rnatadi. Weight parametri ixtiyoriy bo'lib, 0% dan 100% gacha bo'lgan raqam bo'lishi kerak. Standart qiymat 100%. |
Misol: invert(white); | Natija: qora (black) |
Sass Rangni Olish Funktsiyalari
| Funktsiya | Tavsif va Misol |
|---|---|
red(color) | Rangning qizil qiymatini 0 dan 255 gacha bo'lgan raqam sifatida qaytaradi. |
Misol: red(#7fffd4); | Natija: 127 |
Misol: red(red); | Natija: 255 |
green(color) | Rangning yashil qiymatini 0 dan 255 gacha bo'lgan raqam sifatida qaytaradi. |
Misol: green(#7fffd4); | Natija: 255 |
Misol: green(blue); | Natija: 0 |
blue(color) | Rangning ko'k qiymatini 0 dan 255 gacha bo'lgan raqam sifatida qaytaradi. |
Misol: blue(#7fffd4); | Natija: 212 |
Misol: blue(blue); | Natija: 255 |
hue(color) | Rangning hue'ini 0deg dan 360deg gacha bo'lgan raqam sifatida qaytaradi. |
Misol: hue(#7fffd4); | Natija: 160deg |
saturation(color) | Rangning HSL saturation'ini 0% dan 100% gacha bo'lgan raqam sifatida qaytaradi. |
Misol: saturation(#7fffd4); | Natija: 100% |
lightness(color) | Rangning HSL lightness'ini 0% dan 100% gacha bo'lgan raqam sifatida qaytaradi. |
Misol: lightness(#7fffd4); | Natija: 74.9% |
alpha(color) | Rangning alpha kanalini 0 dan 1 gacha bo'lgan raqam sifatida qaytaradi. |
Misol: alpha(#7fffd4); | Natija: 1 |
opacity(color) | Rangning alpha kanalini 0 dan 1 gacha bo'lgan raqam sifatida qaytaradi. |
Misol: opacity(rgba(127, 255, 212, 0.5)); | Natija: 0.5 |
Sass Rangni Manipulyatsiya Qilish Funktsiyalari
| Funktsiya | Tavsif va Misol |
|---|---|
mix(color1, color2, weight) | Rangni color1 va color2 aralashtiradi. Weight parametri 0% dan 100% gacha bo'lishi kerak. Katta weight color1 ko'proq ishlatilishini anglatadi, kichik weight color2 ko'proq ishlatilishini anglatadi. Standart qiymat 50%. |
adjust-hue(color, degrees) | Rangning hue'ini -360deg dan 360deg gacha bo'lgan daraja bilan o'zgartiradi. |
Misol: adjust-hue(#7fffd4, 80deg); | Natija: #8080ff |
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) | Bir yoki bir nechta parametrlarni belgilangan miqdorda o'zgartiradi. Bu funktsiya mavjud rang qiymatiga qo'shadi yoki kamaytiradi. |
Misol: adjust-color(#7fffd4, blue: 25); | Natija: #7fffd4 rangning ko'k qiymati 25 ga oshirilgan |
change-color(color, red, green, blue, hue, saturation, lightness, alpha) | Rangning bir yoki bir nechta parametrlarini yangi qiymatlarga o'zgartiradi. |
Misol: change-color(#7fffd4, red: 255); | Natija: #ffffd4 |
scale-color(color, red, green, blue, saturation, lightness, alpha) | Rangning bir yoki bir nechta parametrlarini masshtablashtiradi. |
rgba(color, alpha) | Alpha kanal bilan yangi rang yaratadi. |
Misol: rgba(#7fffd4, 30%); | Natija: rgba(127, 255, 212, 0.3) |
lighten(color, amount) | Rangni yorqinroq qiladi. Amount 0% dan 100% gacha bo'lishi mumkin. Amount parametri HSL lightness'ni shu foizga oshiradi. |
darken(color, amount) | Rangni qoraytiradi. Amount 0% dan 100% gacha bo'lishi mumkin. Amount parametri HSL lightness'ni shu foizga kamaytiradi. |
saturate(color, amount) | Rangni ko'proq to'yintiradi. Amount 0% dan 100% gacha bo'lishi mumkin. Amount parametri HSL saturation'ni shu foizga oshiradi. |
desaturate(color, amount) | Rangni kamroq to'yintiradi. Amount 0% dan 100% gacha bo'lishi mumkin. Amount parametri HSL saturation'ni shu foizga kamaytiradi. |
opacify(color, amount) | Rangni ko'proq shaffof qiladi. Amount 0 dan 1 gacha bo'lishi mumkin. Amount parametri alpha kanalini shu miqdorda oshiradi. |
fade-in(color, amount) | Rangni ko'proq shaffof qiladi. Amount 0 dan 1 gacha bo'lishi mumkin. Amount parametri alpha kanalini shu miqdorda oshiradi. |
transparentize(color, amount) | Rangni ko'proq shaffof qiladi. Amount 0 dan 1 gacha bo'lishi mumkin. Amount parametri alpha kanalini shu miqdorda kamaytiradi. |
fade-out(color, amount) | Rangni ko'proq shaffof qiladi. Amount 0 dan 1 gacha bo'lishi mumkin. Amount parametri alpha kanalini shu miqdorda kamaytiradi. |