Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Sass rang funksiyalari

ULASHISH

Sass rang funksiyalari

Sass’dagi rang funksiyalarini uch qismga ajratdik: rangni o‘rnatish funksiyalari, rang qiymatlarini olish funksiyalari va rangni o‘zgartirish funksiyalari:

Sass rangni o‘rnatish funksiyalari

Funksiya Tavsif va misol
rgb(red, green, blue) Qizil-Yashil-Ko‘k (Red-Green-Blue, RGB) modeli yordamida rangni o‘rnatadi. RGB rang qiymati rgb(red, green, blue) ko‘rinishida beriladi. Har bir parametr shu 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); // ko‘k rangda chiqadi, chunki blue parametri eng yuqori qiymatga (255), qolganlari esa 0 ga o‘rnatilgan
rgba(red, green, blue, alpha) Qizil-Yashil-Ko‘k-Alfa (Red-Green-Blue-Alpha, RGBA) modeli yordamida rangni o‘rnatadi. RGBA rang qiymatlari RGB rang qiymatlarining alfa kanali qo‘shilgan kengaytmasidir — alfa kanali rangning noshaffofligini (opacity) belgilaydi. alpha parametri 0.0 (to‘liq shaffof) va 1.0 (to‘liq noshaffof) oralig‘idagi son.

Misol:
rgba(0, 0, 255, 0.3); // shaffoflik bilan ko‘k rangda chiqadi
hsl(hue, saturation, lightness) Rang tusi-To‘yinganlik-Yorqinlik (Hue-Saturation-Lightness, HSL) modeli yordamida rangni o‘rnatadi va ranglarni silindrik koordinatalarda ifodalaydi. Hue (rang tusi) — rang g‘ildiragidagi gradus (0 dan 360 gacha): 0 yoki 360 — qizil, 120 — yashil, 240 — ko‘k. Saturation (to‘yinganlik) — foiz qiymati: 0% kulrang tusni, 100% esa to‘liq rangni bildiradi. Lightness (yorqinlik) ham foiz qiymati: 0% — qora, 100% — oq.

Misol:
hsl(120, 100%, 50%); // yashil
hsl(120, 100%, 75%); // och yashil
hsl(120, 100%, 25%); // to‘q yashil
hsl(120, 60%, 70%); // pastel yashil
hsla(hue, saturation, lightness, alpha) Rang tusi-To‘yinganlik-Yorqinlik-Alfa (Hue-Saturation-Lightness-Alpha, HSLA) modeli yordamida rangni o‘rnatadi. HSLA rang qiymatlari HSL rang qiymatlarining alfa kanali qo‘shilgan kengaytmasidir — alfa kanali rangning noshaffofligini (opacity) belgilaydi. alpha parametri 0.0 (to‘liq shaffof) va 1.0 (to‘liq noshaffof) oralig‘idagi son.

Misol:
hsl(120, 100%, 50%, 0.3); // shaffoflik bilan yashil
hsl(120, 100%, 75%, 0.3); // shaffoflik bilan och yashil
grayscale(color) color bilan bir xil yorqinlikdagi kulrang rangni o‘rnatadi.

Misol:
grayscale(#7fffd4);
Natija: #c6c6c6
complement(color) colorning to‘ldiruvchi (komplementar) rangini o‘rnatadi.

Misol:
complement(#7fffd4);
Natija: #ff7faa
invert(color, weight) colorning teskari (negativ) rangini o‘rnatadi. weight parametri ixtiyoriy va 0% dan 100% gacha bo‘lgan son bo‘lishi kerak. Standart qiymat — 100%.

Misol:
invert(white);
Natija: black

Sass rang qiymatlarini olish funksiyalari

Funksiya Tavsif va misol
red(color) colorning qizil (red) qiymatini 0 dan 255 gacha bo‘lgan son sifatida qaytaradi.

Misol:
red(#7fffd4);
Natija: 127
red(red);
Natija: 255
green(color) colorning yashil (green) qiymatini 0 dan 255 gacha bo‘lgan son sifatida qaytaradi.

Misol:
green(#7fffd4);
Natija: 255
green(blue);
Natija: 0
blue(color) colorning ko‘k (blue) qiymatini 0 dan 255 gacha bo‘lgan son sifatida qaytaradi.

Misol:
blue(#7fffd4);
Natija: 212
blue(blue);
Natija: 255
hue(color) colorning rang tusini (hue) 0deg dan 360deg gacha bo‘lgan son sifatida qaytaradi.

Misol:
hue(#7fffd4);
Natija: 160deg
saturation(color) colorning HSL to‘yinganligini (saturation) 0% dan 100% gacha bo‘lgan son sifatida qaytaradi.

Misol:
saturation(#7fffd4);
Natija: 100%
lightness(color) colorning HSL yorqinligini (lightness) 0% dan 100% gacha bo‘lgan son sifatida qaytaradi.

Misol:
lightness(#7fffd4);
Natija: 74.9%
alpha(color) colorning alfa kanalini 0 dan 1 gacha bo‘lgan son sifatida qaytaradi.

Misol:
alpha(#7fffd4);
Natija: 1
opacity(color) colorning alfa kanalini 0 dan 1 gacha bo‘lgan son sifatida qaytaradi.

Misol:
opacity(rgba(127, 255, 212, 0.5));
Natija: 0.5

Sass rangni o‘zgartirish funksiyalari

Funksiya Tavsif va misol
mix(color1, color2, weight) color1 va color2 aralashmasidan iborat rang yaratadi. weight parametri 0% dan 100% gacha bo‘lishi kerak. Kattaroq weight color1 dan ko‘proq foydalanilishini bildiradi. Kichikroq weight esa color2 dan ko‘proq foydalanilishini bildiradi. Standart qiymat — 50%.
adjust-hue(color, degrees) colorning rang tusini -360deg dan 360deg gacha bo‘lgan gradusga o‘zgartiradi.

Misol:
adjust-hue(#7fffd4, 80deg);
Natija: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) Bir yoki bir nechta parametrni ko‘rsatilgan miqdorga o‘zgartiradi. Bu funksiya mavjud rang qiymatiga ko‘rsatilgan miqdorni qo‘shadi yoki undan ayiradi.

Misol:
adjust-color(#7fffd4, blue: 25);
Natija:
change-color(color, red, green, blue, hue, saturation, lightness, alpha) colorning bir yoki bir nechta parametrini yangi qiymatlarga o‘rnatadi.

Misol:
change-color(#7fffd4, red: 255);
Natija: #ffffd4
scale-color(color, red, green, blue,  saturation, lightness, alpha) colorning bir yoki bir nechta parametrini masshtablaydi.
rgba(color, alpha) color asosida berilgan alpha kanaliga ega yangi rang yaratadi.

Misol:
rgba(#7fffd4, 30%);
Natija: rgba(127, 255, 212, 0.3)
lighten(color, amount) colorning 0% dan 100% gacha bo‘lgan amount miqdorida ochroq rangini yaratadi. amount parametri HSL yorqinligini shu foizga oshiradi.
darken(color, amount) colorning 0% dan 100% gacha bo‘lgan amount miqdorida to‘qroq rangini yaratadi. amount parametri HSL yorqinligini shu foizga kamaytiradi.
saturate(color, amount) colorning 0% dan 100% gacha bo‘lgan amount miqdorida to‘yinganroq rangini yaratadi. amount parametri HSL to‘yinganligini shu foizga oshiradi.
desaturate(color, amount) colorning 0% dan 100% gacha bo‘lgan amount miqdorida kamroq to‘yingan rangini yaratadi. amount parametri HSL to‘yinganligini shu foizga kamaytiradi.
opacify(color, amount) colorning 0 dan 1 gacha bo‘lgan amount miqdorida noshaffofroq rangini yaratadi. amount parametri alfa kanalini shu miqdorga oshiradi.
fade-in(color, amount) colorning 0 dan 1 gacha bo‘lgan amount miqdorida noshaffofroq rangini yaratadi. amount parametri alfa kanalini shu miqdorga oshiradi.
transparentize(color, amount) colorning 0 dan 1 gacha bo‘lgan amount miqdorida shaffofroq rangini yaratadi. amount parametri alfa kanalini shu miqdorga kamaytiradi.
fade-out(color, amount) colorning 0 dan 1 gacha bo‘lgan amount miqdorida shaffofroq rangini yaratadi. amount parametri alfa kanalini shu miqdorga kamaytiradi.

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish