ساس رنگ فونکشن

ساس رنگ فونکشن

ਅਸੀਂ Sass ਵਿੱਚ ਰੰਗ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਤਿੰਨ ਹਿੱਸਿਆਂ ਵਿੱਚ ਵੰਡਿਆ ਹੈ: ਰੰਗ ਸੈਟ ਫੰਕਸ਼ਨ, ਰੰਗ ਪ੍ਰਾਪਤ ਫੰਕਸ਼ਨ ਅਤੇ ਰੰਗ ਓਪਰੇਸ਼ਨ ਫੰਕਸ਼ਨ:

Sass ਰੰਗ ਫੰਕਸ਼ਨ ਸੈਟਅਪ

Sass ਰੰਗ ਕਾਰਵਾਈ ਫੰਕਸ਼ਨ ਫੰਕਸ਼ਨ
rgb(red, green, blue)

Red-Green-Blue (RGB) ਮਾਡਲ ਦੀ ਮਦਦ ਨਾਲ ਰੰਗ ਸੈਟ ਕਰੋ。
rgb(red, green, blue) ਰਾਹੀਂ RGB ਰੰਗ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
ਹਰੇਕ ਪੈਰਾਮੀਟਰ ਇਸ ਰੰਗ ਦੀ ਤੀਵਰਤਾ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ، ਜੋ 0 ਤੋਂ 255 ਤੱਕ ਦਾ ਪੂਰਣ ਸੰਖਿਆ ਹੋ ਸਕਦਾ ਹੈ ਜਾਂ ਪ੍ਰਤੀਸ਼ਤ ਦਰ (0% ਤੋਂ 100% ਤੱਕ) ਹੋ ਸਕਦਾ ਹੈ。

实例：

rgb(0, 0, 255);
// ਹਰੀ ਰੰਗ ਵਿੱਚ ਪੇਸ਼ ਕੀਤਾ ਗਿਆ ਕਿਉਂਕਿ blue ਪੈਰਾਮੀਟਰ ਉੱਚ ਤੋਂ ਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ (255)，ਹੋਰ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ 0 ਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ
rgba(red, green, blue, alpha)

Red-Green-Blue-Alpha (RGBA) ਮਾਡਲ ਨਾਲ ਰੰਗ ਸੈਟ ਕਰਦਾ ਹੈ。
RGBA ਰੰਗ ਕੀਮਤ alpha ਚੈਨਲ ਵਾਲੇ RGB ਰੰਗ ਕੀਮਤ ਦੇ ਵਿਸਥਾਰ ਹਨ - ਇਹ ਚੈਨਲ ਰੰਗ ਦੀ ਅਪਰਾਹਰਤਾ ਨੂੰ ਸੁਝਾਉਂਦਾ ਹੈ。
alpha ਪੈਰਾਮੀਟਰ 0.0 (ਪੂਰੀ ਟ੍ਰਾਂਸਪਰੈਂਟ) ਤੋਂ 1.0 (ਪੂਰੀ ਅਪਰਾਹਰਤ) ਦਰਮਿਆਨ ਦਾ ਅੰਕ ਹੁੰਦਾ ਹੈ。

实例：

rgba(0, 0, 255, 0.3); // ਟ੍ਰਾਂਸਪਰੈਂਟ ਨੀਲਾ
hsl(hue, saturation, lightness)

Hue-Saturation-Lightness (HSL) ਮਾਡਲ ਨਾਲ ਰੰਗ ਸੈਟ ਕਰਦਾ ਹੈ - ਅਤੇ ਇਹ ਰੰਗ ਦੇ ਸਿਰਧਾਰਣ ਨਾਲ ਸਬੰਧਤ ਹੈ。
Hue (ਰੰਗ ਦਰਜਾ) ਰੰਗ ਪਰਿਵਾਰ ਦੇ ਅੰਕ ਹੈ (0 ਤੋਂ 360) - 0 ਜਾਂ 360 ਲਾਲ ਹੈ, 120 ਹਰੀ ਹੈ, 240 ਨੀਲਾ ਹੈ
Saturation (ਸੰਤੁਲਨ) ਵੀ ਪ੍ਰਤੀਸ਼ਤ ਹੈ; 0% ਗ੍ਰੇ ਸ਼ੇਡ ਹੈ, 100% ਪੂਰੀ ਰੰਗ ਹੈ。
Lightness (ਚਮਕ) ਵੀ ਪ੍ਰਤੀਸ਼ਤ ਹੈ; 0% ਕਾਲਾ ਹੈ, 100% ਸਫੇਦ ਹੈ。

实例：

hsl(120, 100%, 50%); // ਹਰੀ
hsl(120, 100%, 75%); // ਪਸ਼ੂਰੀ ਹਰੀ
hsl(120, 100%, 25%); // ਗੂੜ੍ਹੀ ਹਰੀ
hsl(120, 60%, 70%); // ਪਸ਼ੂਰੀ ਹਰੀ

hsla(hue, saturation, lightness, alpha)

Hue-Saturation-Lightness-Alpha (HSLA) ਮਾਡਲ ਨਾਲ ਰੰਗ ਸੈਟ ਕਰਦਾ ਹੈ。
HSLA ਰੰਗ ਕੀਮਤ HSL ਰੰਗ ਕੀਮਤ ਦੇ ਵਿਸਥਾਰ ਹਨ, ਜਿਸ ਵਿੱਚ alpha ਚੈਨਲ ਹੈ - ਇਹ ਰੰਗ ਦੀ ਅਪਰਾਹਰਤਾ ਨੂੰ ਸੁਝਾਉਂਦਾ ਹੈ。
alpha ਪੈਰਾਮੀਟਰ 0.0 (ਪੂਰੀ ਟ੍ਰਾਂਸਪਰੈਂਟ) ਤੋਂ 1.0 (ਪੂਰੀ ਅਪਰਾਹਰਤ) ਦਰਮਿਆਨ ਦਾ ਅੰਕ ਹੁੰਦਾ ਹੈ。

实例：

hsl(120, 100%, 50%, 0.3); // ਅਪਰਾਹਰਤ ਹਰੀ
hsl(120, 100%, 75%, 0.3); // ਅਪਰਾਹਰਤ ਗ੍ਰੀਨ

grayscale(color)

ਸਾਰੇ ਰੰਗਾਂ ਦੇ ਨਾਲ ਸਮਾਨ ਚਮਕ ਵਾਲੇ ਗ੍ਰੇ ਰੰਗ ਨੂੰ ਸੈਟ ਕਰਦਾ ਹੈ。

实例：

grayscale(#7fffd4);

ਨਤੀਜਾ: #c6c6c6
complement(color)

ਰੰਗ ਦੇ ਸਮਾਨਤਾ ਰੰਗ ਨੂੰ ਸੈਟ ਕਰਦਾ ਹੈ。

实例：

complement(#7fffd4);

ਨਤੀਜਾ: #ff7faa
invert(color, ਰੰਗ 1 ਅਤੇ ਰੰਗ 2 ਦਾ ਮਿਸ਼ਰਣ ਰੰਗ ਬਣਾਓ。)

ਰੰਗ ਦੇ ਵਿਲੰਬਣ ਜਾਂ ਮੋਟੀ ਰੰਗ ਨੂੰ ਸੈਟ ਕਰਦਾ ਹੈ。
ਰੰਗ 1 ਅਤੇ ਰੰਗ 2 ਦਾ ਮਿਸ਼ਰਣ ਰੰਗ ਬਣਾਓ。ਪੈਰਾਮੀਟਰ ਵਾਲੀ ਹੁੰਦੀ ਹੈ, ਜਿਸ ਨੂੰ 0% ਤੋਂ 100% ਦਰਮਿਆਨ ਦਾ ਅੰਕ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਮੂਲ ਮੁੱਲ 100% ਹੈ。

实例：

invert(white);

ਨਤੀਜਾ: black

Sass ਰੰਗ ਕੱਢਣ ਵਾਲੀ ਫੰਕਸ਼ਨ

Sass ਰੰਗ ਕਾਰਵਾਈ ਫੰਕਸ਼ਨ ਫੰਕਸ਼ਨ
red(color)

0 ਤੋਂ 255 ਦੇ ਅੰਕ ਨਾਲ ਰੰਗ ਦਾ ਲਾਲ ਮੁੱਲ ਵਾਪਸ ਦਿੰਦਾ ਹੈ。

实例：

red(#7fffd4);

ਨਤੀਜਾ: 127

red(red);

blue(blue);
green(color)

0 ਤੋਂ 255 ਦੇ ਅੰਕ ਨਾਲ ਰੰਗ ਦਾ ਹਰੀ ਮੁੱਲ ਵਾਪਸ ਦਿੰਦਾ ਹੈ。

实例：

green(#7fffd4);

blue(blue);

green(blue);

green(blue);
ਨਤੀਜਾ: 0color)

blue(

实例：

ਰੰਗ ਦੇ ਨੀਲੇ ਮੁੱਲ ਨੂੰ 0 ਤੋਂ 255 ਦਰਮਿਆਨ ਦੇ ਨੰਬਰ ਵਿੱਚ ਵਾਪਸ ਦੇਵੇ।

blue(#7fffd4);

ਨਤੀਜਾ: 212

blue(blue);
ਨਤੀਜਾ: 255color)

hue(

实例：

ਰੰਗ ਦੇ ਹਿਊ ਨੂੰ 0deg ਤੋਂ 360deg ਦਰਮਿਆਨ ਦੇ ਨੰਬਰ ਵਿੱਚ ਵਾਪਸ ਦੇਵੇ।

hue(#7fffd4);
ਨਤੀਜਾ: 160degcolor)

saturation(

实例：

ਰੰਗ ਦੇ HSL ਪੂਰਤੀ ਨੂੰ 0% ਤੋਂ 100% ਦਰਮਿਆਨ ਦੇ ਨੰਬਰ ਵਿੱਚ ਵਾਪਸ ਦੇਵੇ।

saturation(#7fffd4);
ਨਤੀਜਾ: 100%color)

lightness(

实例：

ਰੰਗ ਦੇ HSL ਰੌਸ਼ਨਤਾ ਨੂੰ 0% ਤੋਂ 100% ਦਰਮਿਆਨ ਦੇ ਨੰਬਰ ਵਿੱਚ ਵਾਪਸ ਦੇਵੇ।

lightness(#7fffd4);
ਨਤੀਜਾ: 74.9%color)

opacity(

实例：

alpha(

alpha(#7fffd4);
ਨਤੀਜਾ: 1color)

opacity(

实例：

ਰੰਗ ਦੇ alpha ਚੈਨਲ ਨੂੰ 0 ਤੋਂ 1 ਦਰਮਿਆਨ ਦੇ ਨੰਬਰ ਵਿੱਚ ਵਾਪਸ ਦੇਵੇ।

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

ਨਤੀਜਾ: 0.5

Sass ਰੰਗ ਕਾਰਵਾਈ ਫੰਕਸ਼ਨ ਫੰਕਸ਼ਨ
ਵਰਣਨ ਅਤੇ ਉਦਾਹਰਣਵੱਡੇ ਭਾਰ ਮਤਲਬ ਹੈ ਕਿ ਜ਼ਿਆਦਾ, color2, ਰੰਗ 1 ਅਤੇ ਰੰਗ 2 ਦਾ ਮਿਸ਼ਰਣ ਰੰਗ ਬਣਾਓ。)

mix(
ਰੰਗ 1 ਅਤੇ ਰੰਗ 2 ਦਾ ਮਿਸ਼ਰਣ ਰੰਗ ਬਣਾਓ。 weight
ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ 0% ਤੋਂ 100% ਦੇ ਵਿੱਚ ਰੱਖਣਾ ਹੈ। ਮੂਲ ਮੁੱਲ 50% ਹੈ。 ਵੱਡੇ ਭਾਰ ਮਤਲਬ ਹੈ ਕਿ ਜ਼ਿਆਦਾ。
ਛੋਟੇ ਭਾਰ ਮਤਲਬ ਹੈ ਕਿ ਜ਼ਿਆਦਾ color2。

adjust-hue(color, degrees)

ਰੰਗ ਦੇ ਹਿਊ ਨੂੰ -360 ਤੋਂ 360 ਡਿਗਰੀ ਦੇ ਮਾਤਰਾ ਵਿੱਚ ਸੰਤੁਲਿਤ ਕਰੋ。

实例：

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

ਨਤੀਜਾ: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)

ਨਿਰਧਾਰਿਤ ਮਾਤਰਾ ਦੇ ਅਨੁਸਾਰ ਇੱਕ ਜਾਂ ਕਈ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਸੰਤੁਲਿਤ ਕਰੋ。
ਇਹ ਫੰਕਸ਼ਨ ਮੌਜੂਦਾ ਰੰਗ ਮੁੱਲਾਂ ਵਿੱਚ ਨਿਰਧਾਰਿਤ ਮਾਤਰਾ ਜੋੜਦਾ ਜਾਂ ਘਟਾਉਂਦਾ ਹੈ。

实例：

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

ਨਤੀਜਾ:
change-color(color, red, green, blue, hue, saturation, lightness, alpha)

ਰੰਗ ਦੇ ਇੱਕ ਜਾਂ ਕਈ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਨਵੇਂ ਮੁੱਲ ਦੇ ਰੂਪ ਵਿੱਚ ਸੈਟ ਕਰੋ。

实例：

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

ਨਤੀਜਾ: #ffffd4
scale-color(color, red, green, blue, saturation, lightness, alpha) ਇੱਕ ਜਾਂ ਕਈ ਰੰਗ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਸਕੇਲ ਕਰੋ。
rgba(ਰੰਗ, alpha)

ਦਿੱਤੇ alpha ਚੈਨਲ ਨਾਲ ਨਵੇਂ ਰੰਗ ਬਣਾਓ。

实例：

مثال:

rgba(#7fffd4, 30%);
Result: rgba(127, 255, 212, 0.3)color, amount) پرسنٹ کے مطابق پارامتر کو ایچ ایس ایل کی برقی کی تعداد کم کیا جاتا ہے.
amount lighten(
پرسنٹ کے مطابق پارامتر کو ایچ ایس ایل کی برقی کی تعداد اضافہ کیا جاتا ہے.color, amount) darken(
amount پرسنٹ کے مطابق پارامتر کو ایچ ایس ایل کی برقی کی تعداد کم کیا جاتا ہے.
saturate(color, amount) ساتوریشن اضافہ کیا جاتا ہے.
amount پرسنٹ کے مطابق پارامتر کو ایچ ایس ایل کی پوریتی اضافہ کیا جاتا ہے.
desaturate(color, amount) 0% او ر 100% کے درمیان کی تعداد کا استعمال سے کم پوریتی کا رنگ بنایا جاتا ہے.
amount پرسنٹ کے مطابق پارامتر کو ایچ ایس ایل کی پوریتی کم کیا جاتا ہے.
opacify(color, amount) 0 او ر 1 کے درمیان کی تعداد کا استعمال سے کم شفاف رنگ بنایا جاتا ہے.
amount آلفا چینل کی اقدار کے مطابق پارامتروں کو اضافہ کیا جاتا ہے.
fade-in(color, amount) 0 او ر 1 کے درمیان کی تعداد کا استعمال سے کم شفاف رنگ بنایا جاتا ہے.
amount آلفا چینل کی اقدار کے مطابق پارامتروں کو کم کیا جاتا ہے.
transparentize(color, amount) 0 او ر 1 کے درمیان کی تعداد کا استعمال سے زیادہ شفاف رنگ بنایا جاتا ہے.
amount آلفا چینل کی اقدار کے مطابق پارامتروں کو کم کیا جاتا ہے.
fade-out(color, amount) 0 او ر 1 کے درمیان کی تعداد کا استعمال سے زیادہ شفاف رنگ بنایا جاتا ہے.
amount آلفا چینل کی اقدار کے مطابق پارامتروں کو اضافہ کیا جاتا ہے.