توابع Color

23 فروردین 1399
درسنامه درس 6 از سری آموزش Sass
sass-06

در آخرین قسمت سری آموزش Sass، با توابع Color در Sass آشنا می شوید.

ما توابع Color در Sass را به دسته تقسیم کرده ایم: توابع Set color که در رابطه با اعمال رنگ ها عمل می کنند، توابع Get color که مربوط به دریافت مقادیر رنگ هاست و توابع manipulate color که درباره دستکاری مقادیر رنگ هاست. در جداول زیر، به تفکیک سه دسته توابع Color در Sass به همراه شرح عملکردشان آمده اند.

توابع Set Color در Sass

تابع شرح و مثال
(rgb(redgreenblue

این تابع با استفاده از مدل قرمز-سبز-آبی یا RGB رنگی را می سازد. در واقع در نهایت یک رنگ خاص از ترکیب این سه رنگ باشد، بوجود می آید. هرکدام از پارامترهای این تابع که یک رنگ خاص را نمایندگی می کنند، می توانند مقداری از نوع صحیح بین 0 تا 255 یا مقدار درصدی از 0% تا 100% بگیرند.

مثال:

;(rgb(0, 0, 255

خروجی این تابع رنگ آبی می باشد، زیرا بالاترین مقدار خود را در بین سه پارامتر دیگر، داراست و دو رنگ یا پارامتر دیگر مقدار صفر دارند.

(rgba(redgreenbluealpha

این تابع با استفاده از رنگ های قرمز، سبز، آبی و مقدار آلفا رنگی را تولید می کند. در واقع با استفاده از مدل RGBA رنگ تولید می شود. این مدل نیز زیرمجموعه ای از مدل RGB می باشد. آلفا در این تابع یک کانال (channel) است که مقدار وضوح رنگ را تعیین می کند. آلفا مقداری بین 0.0 که نشان دهنده شفافیت کامل است و 1.0 را داراست.

مثال:

;(0,0,255,0.3)rgba

کد بالا رنگ آبی را با درجه ای از وضوح نشان می دهد.

(hsl(huesaturationlightness این تابع با استفاده از سه مقدار رنگ، اشباع و سبکی یا مدل HSL رنگی را تولید می کند و در اصطلاحی دیگر می گویند این تابع رنگی را بر اساس مختصات استوانه ای تولید می کند. حالا هر یک از پارامترهای این تابع را بررسی می کنیم:
پارامتر Hue نشان دهنده درجه است (بین 0 تا 360 درجه) - مقدار 0 یا 360 درجه یعنی قرمز، و 120 نیز به معنای سبز می باشد و همچنین عدد 240 رنگ آبی را نشان می دهد.
پارامتر Saturation یا اشباع مقدار درصدی می گیرد. 0% یعنی سایه ای از خاکستری و 100% به معنای کاملا رنگی می باشد.
پارامتر روشنی یا Lightness هم یک پارامتر درصدی است. 0% یعنی سیاه و 100% به معنای سفید می باشد.مثال: (خروجی هر تابع در کنار آن نوشته شده است)hsl(120, 100%, 50%); // green
hsl(120, 100%, 75%); // light green
hsl(120, 100%, 25%); // dark green
hsl(120, 60%, 70%); // pastel green

 

(hsla(huesaturationlightnessalpha

این تابع، نوعی از تابع hsl می باشد که علاوه بر پارامترهای تابع hsl، پارامتر آلفا را نیز در لیست پارامتر ها اضافه کرده است. آلفا به عنوان پارامتر چهارم این تابع، مقدار وضوح یا شفافیت رنگ را مشخص می کند. پارامتر آلفا می تواند مقداری بین 0.0 (کاملا شفاف)  تا 1.0 (کاملا مات) را داشته باشد.

در واقع پارامتر alpha نشان دهنده میزان opacity یک رنگ است که به معنای میزان کدری رنگ می باشد. در مثال زیر رنگ خروجی از تابع در کنار آن نوشته شده است.

مثال:

hsl(120, 100%, 50%, 0.3); // green with opacity
hsl(120, 100%, 75%, 0.3); // light green with opacity

(grayscale(color

این تابع یک رنگ خاکستری براساس سبکی رنگی که در ورودی به آن داده می شود، تولید می کند.

مثال:

;(grayscale(#7fffd4
Result: #c6c6c6

(complement(color این تابع رنگی را که مکمل رنگ ورودی است، تولید می کند.

مثال:

;(complement(#7fffd4
Result: #ff7faa

(invert(colorweight

این تابع رنگی را که معکوس یا مخالف رنگ ورودی تابع است، تولید می کند. پارامتر weight، یک پارامتر اختیاری است که می تواند مقداری بین 0% تا 100% داشته باشد. به صورت پیش فرض مقدار پارامتر weight، مقدار 100% است.

مثال: در این مثال در ورودی رنگ سفید داده می شود و در خروجی رنگ سیاه داده می شود.

;(invert(white
Result: black

توابع Get Color در Sass

تابع شرح و مثال
(red(color

مقدار رنگ قرمز در یک رنگ ورودی تابع را، برمی گرداند. مقدار خروجی این عدد که در واقع نشان دهنده میزان رنگ قرمز در رنگ ورودی است، عددی بین 0 تا 255 را شامل می شود.

مثال:

;(red(#7fffd4
Result: 127
;(red(red
Result: 255

(green(color

مقدار رنگ سبز در یک رنگ ورودی تابع را، برمی گرداند. مقدار خروجی این عدد که در واقع نشان دهنده میزان رنگ سبز در رنگ ورودی است، عددی بین 0 تا 255 را شامل می شود.

مثال:

;(green(#7fffd4
Result: 255
;(green(blue
Result: 0

(blue(color

مقدار رنگ آبی در یک رنگ ورودی تابع را برمی گرداند. مقدار خروجی این عدد که در واقع نشان دهنده میزان رنگ آبی در رنگ ورودی است، عددی بین 0 تا 255 را شامل می شود.

مثال:

;(blue(#7fffd4
Result: 212
;(blue(blue
Result: 255

(hue(color

مقدار hue در یک رنگ ورودی تابع را برمی گرداند. مقدار خروجی این عدد که در واقع نشان دهنده میزان hue در رنگ ورودی است، عددی بین 0 درجه تا 255 درجه را شامل می شود.

مثال:

;(hue(#7fffd4
Result: 160deg

(saturation(color

مقدار saturation یا اشباع در یک رنگ ورودی تابع را برمی گرداند. مقدار خروجی این عدد که در واقع نشان دهنده میزان saturation یا اشباع در رنگ ورودی است، عددی بین 0% تا 100% را شامل می شود.

مثال:

;(saturation(#7fffd4
Result: 100%

(lightness(color

مقدار lightness یا روشنی در یک رنگ ورودی تابع را برمی گرداند. مقدار خروجی این عدد که در واقع نشان دهنده میزان lightness یا سبکی در رنگ ورودی است، عددی بین 0% تا 100% را شامل می شود.

مثال:

(lightness(#7fffd4
Result: 74.9%alpha(#7fffd4);
Result: 1

(alpha(color

مقدار پارامتر آلفا در یک رنگ ورودی تابع را برمی گرداند. مقدار خروجی این عدد که در واقع نشان دهنده میزان پارامتر آلفا در رنگ ورودی است، عددی بین 0 تا 1 را شامل می شود.

مثال:

;(alpha(#7fffd4
Result: 1

(opacity(color

مقدار کدری در یک رنگ ورودی تابع را برمی گرداند. مقدار خروجی این عدد که در واقع نشان دهنده میزان کدری در رنگ ورودی است، عددی بین 0 تا 1 را شامل می شود.

مثال:

;(opacity(rgba(127, 255, 212, 0.5
Result: 0.5

توابعی برای دستکاری مقادیر رنگ ها در Sass

تابع شرح و مثال
(mix(color1color2weight این تایع رنگی را که ترکیب دو رنگ ورودی آن است، تولید می کند. پارامتر weight مقداری بین 0% تا 100% به خود اختصاص می دهد. هرچه میزان مقدار wight بیشتر باشد، سهم رنگ اول در رنگ نهایی بیش تر است و هر چه weight کوچکتر باشد، سهم رنگ دوم در رنگ نهایی بیشتر است. مقدار پیش فرض برای weight 50% می باشد.
(adjust-hue(colordegrees

میزان hue رنگ را با درجه ای بین 360- درجه تا 360 درجه تنظیم می کند.

مثال:

;(adjust-hue(#7fffd4, 80deg
Result: #8080ff

(adjust-color(colorredgreenbluehuesaturationlightnessalpha

یک یا چند پارامتر از رنگی را با توجه به مقادیر مشخص دریافت شده تنظیم می کند. این تابع مقدار معینی از/به مقدار رنگ موجود کم/زیاد می کند.

مثال: (در مثال زیر تاثیر مقدار 25 از رنگ آبی را روی کد رنگی 7fffd4 می بینید که منجر به چه نتیجه ای می شود!)

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

(change-color(colorredgreenbluehuesaturationlightnessalpha

این تابع یک یا چند پارامتر از رنگی را با مقادیر جدید تنظیم می کند.

مثال:

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

(scale-color(colorredgreenblue,  saturationlightnessalpha

این تابع رنگ ورودی را تحت تاثیر یک یا چند پارامتر قرار می دهد و آن را تنظیم می کند.

سوال مهم: تفاوت سه تابع adjust-color و change-color و scale-color چیست؟

تابع adjust-color رنگ ورودی را براساس پارامترهای دریافتی "تغییر" می دهد.

تابع change-color، مقادیر پارامترهای دریافتی را با مقادیر متناظر در رنگ ورودی «جایگزین» می کند و رنگ «جدید» تولید می کند.

تابع scale-color رنگ ورودی را براساس مقادیر پارامترهای دریافتی، با استفاده از scale یا مقیاس، «تعدیل» می کند.

(rgba(coloralpha

پارامتر آلفا را بر رنگ اعمال می کند و رنگ جدیدی می دهد.

مثال:

;(rgba(#7fffd4, 30%
(Result: rgba(127, 255, 212, 0.3

(lighten(coloramount این تابع با استفاده از پارامتر amount رنگ ورودی را روشن تر می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0% تا 100% می باشد. پارامتر amount، روشنایی HSL را با استفاده از درصد افزایش می دهد.
(darken(coloramount این تابع با استفاده از پارامتر amount رنگ ورودی را کدر می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0% تا 100% می باشد. پارامتر amount، روشنایی HSL را با استفاده از درصد کاهش می دهد.
(saturate(coloramount این تابع با استفاده از پارامتر amount رنگ ورودی را به رنگ اشباع تری تبدیل می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0% تا 100% می باشد. پارامتر amount، اشباع HSL را با استفاده از درصد افزایش می دهد.
(desaturate(coloramount این تابع با استفاده از پارامتر amount مقدار اشباع رنگ ورودی را کمتر می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0% تا 100% می باشد. پارامتر amount، اشباع HSL را با استفاده از درصد کاهش می دهد.
(opacify(coloramount این تابع با استفاده از پارامتر amount مقدار مات بودن رنگ ورودی را بیشتر می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0 و 1 می باشد. پارامتر amount، مقدار کانال آلفا را افزایش می دهد.
(fade-in(coloramount این تابع نیز مثل تابع قبلی با استفاده از پارامتر amount مقدار مات بودن رنگ ورودی را بیشتر می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0 و 1 می باشد. پارامتر amount، مقدار کانال آلفا را افزایش می دهد.
(transparentize(coloramount این تابع با استفاده از پارامتر amount مقدار شفافیت رنگ ورودی را بیشتر می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0 و 1 می باشد. پارامتر amount، مقدار کانال آلفا را کاهش می دهد.
(fade-out(coloramount این تابع نیز مانند تابع قبلی با استفاده از پارامتر amount مقدار شفافیت رنگ ورودی را بیش تر می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0 و 1 می باشد. پارامتر amount، مقدار کانال آلفا را کاهش می دهد.

در این جا سری آموزش Sass به پایان رسید. حتما سوالات و پیشنهادات خود را از قسمت نظرات با ما درمیان بگذارید. امیدواریم این مجموعه آموزشی برای شما مفید بوده باشد.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش Sass توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

ما را دنبال کنید
اینستاگرام روکسو تلگرام روکسو ایمیل و خبرنامه روکسو