توابع Color در Sass | آموزش جامع Sass

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

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

توابع Set Color در Sass

تابع	شرح و مثال
(rgb(red, green, blue	این تابع با استفاده از مدل قرمز-سبز-آبی یا RGB رنگی را می سازد. در واقع در نهایت یک رنگ خاص از ترکیب این سه رنگ باشد، بوجود می آید. هرکدام از پارامترهای این تابع که یک رنگ خاص را نمایندگی می کنند، می توانند مقداری از نوع صحیح بین 0 تا 255 یا مقدار درصدی از 0% تا 100% بگیرند. مثال: ;(rgb(0, 0, 255 خروجی این تابع رنگ آبی می باشد، زیرا بالاترین مقدار خود را در بین سه پارامتر دیگر، داراست و دو رنگ یا پارامتر دیگر مقدار صفر دارند.
(rgba(red, green, blue, alpha	این تابع با استفاده از رنگ های قرمز، سبز، آبی و مقدار آلفا رنگی را تولید می کند. در واقع با استفاده از مدل RGBA رنگ تولید می شود. این مدل نیز زیرمجموعه ای از مدل RGB می باشد. آلفا در این تابع یک کانال (channel) است که مقدار وضوح رنگ را تعیین می کند. آلفا مقداری بین 0.0 که نشان دهنده شفافیت کامل است و 1.0 را داراست. مثال: ;(0,0,255,0.3)rgba کد بالا رنگ آبی را با درجه ای از وضوح نشان می دهد.
(hsl(hue, saturation, lightness	این تابع با استفاده از سه مقدار رنگ، اشباع و سبکی یا مدل 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(hue, saturation, lightness, alpha	این تابع، نوعی از تابع 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(color, weight	این تابع رنگی را که معکوس یا مخالف رنگ ورودی تابع است، تولید می کند. پارامتر 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(color1, color2, weight	این تایع رنگی را که ترکیب دو رنگ ورودی آن است، تولید می کند. پارامتر weight مقداری بین 0% تا 100% به خود اختصاص می دهد. هرچه میزان مقدار wight بیشتر باشد، سهم رنگ اول در رنگ نهایی بیش تر است و هر چه weight کوچکتر باشد، سهم رنگ دوم در رنگ نهایی بیشتر است. مقدار پیش فرض برای weight 50% می باشد.
(adjust-hue(color, degrees	میزان hue رنگ را با درجه ای بین 360- درجه تا 360 درجه تنظیم می کند. مثال: ;(adjust-hue(#7fffd4, 80deg Result: #8080ff
(adjust-color(color, red, green, blue, hue, saturation, lightness, alpha	یک یا چند پارامتر از رنگی را با توجه به مقادیر مشخص دریافت شده تنظیم می کند. این تابع مقدار معینی از/به مقدار رنگ موجود کم/زیاد می کند. مثال: (در مثال زیر تاثیر مقدار 25 از رنگ آبی را روی کد رنگی 7fffd4 می بینید که منجر به چه نتیجه ای می شود!) ;(adjust-color(#7fffd4, blue: 25 Result:
(change-color(color, red, green, blue, hue, saturation, lightness, alpha	این تابع یک یا چند پارامتر از رنگی را با مقادیر جدید تنظیم می کند. مثال: ;(change-color(#7fffd4, red: 255 Result: #ffffd4
(scale-color(color, red, green, blue, saturation, lightness, alpha	این تابع رنگ ورودی را تحت تاثیر یک یا چند پارامتر قرار می دهد و آن را تنظیم می کند. سوال مهم: تفاوت سه تابع adjust-color و change-color و scale-color چیست؟ تابع adjust-color رنگ ورودی را براساس پارامترهای دریافتی "تغییر" می دهد. تابع change-color، مقادیر پارامترهای دریافتی را با مقادیر متناظر در رنگ ورودی «جایگزین» می کند و رنگ «جدید» تولید می کند. تابع scale-color رنگ ورودی را براساس مقادیر پارامترهای دریافتی، با استفاده از scale یا مقیاس، «تعدیل» می کند.
(rgba(color, alpha	پارامتر آلفا را بر رنگ اعمال می کند و رنگ جدیدی می دهد. مثال: ;(rgba(#7fffd4, 30% (Result: rgba(127, 255, 212, 0.3
(lighten(color, amount	این تابع با استفاده از پارامتر amount رنگ ورودی را روشن تر می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0% تا 100% می باشد. پارامتر amount، روشنایی HSL را با استفاده از درصد افزایش می دهد.
(darken(color, amount	این تابع با استفاده از پارامتر amount رنگ ورودی را کدر می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0% تا 100% می باشد. پارامتر amount، روشنایی HSL را با استفاده از درصد کاهش می دهد.
(saturate(color, amount	این تابع با استفاده از پارامتر amount رنگ ورودی را به رنگ اشباع تری تبدیل می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0% تا 100% می باشد. پارامتر amount، اشباع HSL را با استفاده از درصد افزایش می دهد.
(desaturate(color, amount	این تابع با استفاده از پارامتر amount مقدار اشباع رنگ ورودی را کمتر می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0% تا 100% می باشد. پارامتر amount، اشباع HSL را با استفاده از درصد کاهش می دهد.
(opacify(color, amount	این تابع با استفاده از پارامتر amount مقدار مات بودن رنگ ورودی را بیشتر می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0 و 1 می باشد. پارامتر amount، مقدار کانال آلفا را افزایش می دهد.
(fade-in(color, amount	این تابع نیز مثل تابع قبلی با استفاده از پارامتر amount مقدار مات بودن رنگ ورودی را بیشتر می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0 و 1 می باشد. پارامتر amount، مقدار کانال آلفا را افزایش می دهد.
(transparentize(color, amount	این تابع با استفاده از پارامتر amount مقدار شفافیت رنگ ورودی را بیشتر می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0 و 1 می باشد. پارامتر amount، مقدار کانال آلفا را کاهش می دهد.
(fade-out(color, amount	این تابع نیز مانند تابع قبلی با استفاده از پارامتر amount مقدار شفافیت رنگ ورودی را بیش تر می کند. مقدار مجاز دریافتی برای پارامتر amount بین 0 و 1 می باشد. پارامتر amount، مقدار کانال آلفا را کاهش می دهد.

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