Sass Color Functions
توابع رنگ
توابع رنگ در Sass را به سه دسته تقسیم کرده‌ایم. توابعی که رنگ را تعیین (set) می‌کنند، توابعی که رنگ را به دست‌می‌آورند (get) و توابعی که رنگ را دستکاری (Manipulate) می‌کنند.
توابع تعیین رنگ
| تابع | توضیح |
|---|---|
| rgb(red, green, blue) |
با استفاده از مدل سه رنگ قرمز، سبز و آبی رنگ را تعیین می‌کند. مقدار هر رنگ می‌توانند عددی صحیح بین صفر و ۲۵۵ باشد.
مثال: ;rgb(0, 0, 255) نتیجه، رنگ ابی خواهد بود زیرا مقدار آن بیشینه (255) و مقدار دو رنگ دیگر کمینه (صفر) است. |
| rgba(red, green, blue, alpha) | با استفاده از مدل سه رنگ قرمز، سبز و آبی و مقدار آلفا رنگ را تعیین می‌کند. مقدار هر رنگ می‌توانند عددی صحیح بین صفر و ۲۵۵ باشد و مقدار آلفا عددی بین صفر و یک است. مقدار آلفا شفافیت یا تیره بودن رنگ را تعیین می‌کند. هر چه مقدار آن کمتر باشد رنگ شفاف‌تر است به گونه‌ای که مقدار صفر رنگ را نشان نمی‌دهد. |
| hsl(hue, saturation, lightness) |
بر اساس مدل Hue-Saturation-Lightness (HSL) رنگ را تعیین می‌کند. Hue مقدار درجه روی دایره رنگ است به صورتی که، مقدار صفر یا 360 معادل رنگ قرمز، مقدار 120 معادل رنگ سبز و مقدار 240 معادل رنگ آبی است. Saturation یک مقدار به صورت درصدی است؛ صفر درصد معادل سایه خاکستری و 100 درصد معادل رنگ کامل است. Lightness هم یک مقدار به صورت درصدی است که صفر درصد معادل سیاه و ۱۰۰ درصد معادل سفید است.
مثال: 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) |
تفاوت hsla با hsl تنها در اضافه شدن مقدار آلفا است و چنانکه می‌دانید این مقدار میزان شفافیت رنگ را مشخص و عددی بین صفر و یک است.
مثال: hsl(120, 100%, 50%, 0.3); // green with opacity hsl(120, 100%, 75%, 0.3); // light green with opacity |
| grayscale(color) |
یک رنگ خاکستری را با همان روشنایی (lightness) رنگ داده شده تعیین می‌کند.
مثال: ;grayscale(#7fffd4) Result: #c6c6c6 |
| complement(color) |
یک رنگ مکملِ رنگ داده شده را تعیین می‌کند.
مثال: ;complement(#7fffd4) Result: #ff7faa |
| invert(color, weight) |
یک رنگِ معکوس رنگ داده شده را تعیین می‌کند. پارامتر وزن (weight) اختیاری و مقدار آن به صورت درصد است. مقدار پیش‌فرض آن برابر ۱۰۰ درصد است.
مثال: ;invert(white) Result: black |
توابع به دست‌آوردن مقدار رنگ
| تابع | توضیح |
|---|---|
| red(color) |
مقدار قرمز رنگ داده شده را به صورت عددی بین صفر و 255 برمی‌گرداند.
مثال: ;red(#7fffd4) Result: 127 ;red(red) Result: 255 |
| green(color) |
مقدار سبز رنگ داده شده را به صورت عددی بین صفر و 255 برمی‌گرداند.
مثال: ;green(#7fffd4) Result: 255 ;green(blue) Result: 0 |
| blue(color) |
مقدار آبی رنگ داده شده را به صورت عددی بین صفر و 255 برمی‌گرداند.
مثال: ;blue(#7fffd4) Result: 212 ;blue(blue) Result: 255 |
| hue(color) |
مقدار hue رنگ داده شده را به صورت عددی بین صفر و 360 درجه برمی‌گرداند.
مثال: ;hue(#7fffd4) Result: 160deg |
| saturation(color) |
مقدار saturation رنگ داده شده را به صورت عددی بین صفر و 100 درصد برمی‌گرداند.
مثال: ;saturation(#7fffd4) Result: 100% |
| lightness(color) |
مقدار lightness رنگ داده شده را به صورت عددی بین صفر و 100 درصد برمی‌گرداند.
مثال: ;lightness(#7fffd4) Result: 74.9% |
| alpha(color) |
مقدار alpha رنگ داده شده را به صورت عددی بین صفر و 1 برمی‌گرداند.
مثال: ;alpha(#7fffd4) Result: 1 |
| opacity(color) |
مقدار opacity رنگ داده شده را به صورت عددی بین صفر و 1 برمی‌گرداند.
مثال: ;opacity(rgba(127, 255, 212, 0.5)) Result: 0.5 |
توابع دستکاری کردن رنگ
| تابع | توضیح |
|---|---|
| mix(color1, color2, weight) | مخلوطی از دو رنگ داده شده را ایجاد می‌کند. مقدار وزن (weight) به صورت درصدی و عددی بین صفر و ۱۰۰ است. هرچه مقدار آن بیشتر باشد، مقدار بیشتری از رنگ اول استفاده می‌شود. مقدار پیش‌فرض آن برابر ۵۰ درصد است. |
| adjust-hue(color, degrees) |
مقدار hue رنگ داده شده را بر اساس مقدار درجه تعیین شده که عددی بین 360deg- تا 360deg است، تنظیم می‌کند.
مثال: ;adjust-hue(#7fffd4, 80deg) Result: #8080ff |
| adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) |
مقدار یک یا تعداد بیشتری از پارامترهای رنگ را بر اساس مقادیر داده شده تنظیم می‌کند. این تابع مقدار تعیین شده را از مقدار رنگ موجود کم یا به آن اضافه می‌کند.
مثال: ;adjust-color(#7fffd4, blue: 25) :Result |
| change-color(color, red, green, blue, hue, saturation, lightness, alpha) |
مقدار یک یا تعداد بیشتری از پارامترهای رنگ را برابر مقادیر داده شده تغییر می‌دهد.
مثال: ;change-color(#7fffd4, red: 255) Result: Result: #ffffd4 |
| scale-color(color, red, green, blue, saturation, lightness, alpha) | مقدار یک یا تعداد بیشتری از پارامترهای رنگ داده شده را بر اساس مقادیر جدید مقیاس می‌کند. |
| rgba(color, alpha) | رنگ جدیدی از رنگ داده شده را با مقدار آلفای تعیین شده ایجاد می‌کند. |
| lighten(color, amount) | رنگ روشن‌تری از رنگ داده شده بر اساس مقدار مشخص شده (amount) ایجاد می‌کند. مقدار مشخص شده عددی بین صفر و ۱۰۰ است و روشنایی (lightness) رنگ را افزایش می‌دهد. |
| darken(color, amount) | رنگ تیره‌تری از رنگ داده شده بر اساس مقدار مشخص شده (amount) ایجاد می‌کند. مقدار مشخص شده عددی بین صفر و ۱۰۰ است و روشنایی (lightness) رنگ را کاهش می‌دهد. |
| saturate(color, amount) | رنگ با اشباع بیشتری از رنگ داده شده بر اساس مقدار مشخص شده (amount) ایجاد می‌کند. مقدار مشخص شده عددی بین صفر و ۱۰۰ است و اشباع (saturation) رنگ را افزایش می‌دهد. |
| desaturate(color, amount) | رنگ با اشباع کمتری از رنگ داده شده بر اساس مقدار مشخص شده (amount) ایجاد می‌کند. مقدار مشخص شده عددی بین صفر و ۱۰۰ است و اشباع (saturation) رنگ را کاهش می‌دهد. |
| opacify(color, amount) | رنگ با شفافیت کمتری از رنگ داده شده بر اساس مقدار مشخص شده (amount) ایجاد می‌کند. مقدار مشخص شده عددی بین صفر و یک است و شفافیت رنگ را کاهش می‌دهد. |
| fade-in(color, amount) | رنگ با شفافیت کمتری از رنگ داده شده بر اساس مقدار مشخص شده (amount) ایجاد می‌کند. مقدار مشخص شده عددی بین صفر و یک است و شفافیت رنگ را کاهش می‌دهد. |
| transparentize(color, amount) | رنگ با شفافیت بیشتری از رنگ داده شده بر اساس مقدار مشخص شده (amount) ایجاد می‌کند. مقدار مشخص شده عددی بین صفر و یک است و شفافیت رنگ را افزایش می‌دهد. |
| fade-out(color, amount) | رنگ با شفافیت بیشتری از رنگ داده شده بر اساس مقدار مشخص شده (amount) ایجاد می‌کند. مقدار مشخص شده عددی بین صفر و یک است و شفافیت رنگ را افزایش می‌دهد. |