ما توابع رنگ را در Sass به سه بخش تقسیم کردهایم: رنگ را تنظیم کنید
توابع، دریافت توابع رنگ و دستکاری توابع رنگ:
Sass Set Color Functions
| تابع | توضیحات & مثال |
|---|---|
| rgb(قرمز، سبز، آبی) | یک رنگ را با استفاده از مدل قرمز-سبز-آبی (RGB) تنظیم می کند. یک مقدار رنگ RGB است مشخص شده با: rgb (قرمز، سبز، آبی). هر پارامتر شدت را مشخص می کند از آن رنگ و می تواند یک عدد صحیح بین 0 تا 255 یا یک مقدار درصد باشد (از 0% تا 100%). مثال: rgb(0, 0, 255); // به صورت آبی ارائه می شود زیرا پارامتر آبی روی بالاترین مقدار خود (255) و بقیه روی 0 | تنظیم شده است
| rgba(قرمز، سبز، آبی، آلفا) | یک رنگ را با استفاده از مدل قرمز-سبز-آبی-آلفا (RGBA) تنظیم می کند. رنگ RGBA مقادیر بسط مقادیر رنگ RGB با کانال آلفا هستند - که کدورت رنگ را مشخص می کند. پارامتر آلفا یک عدد بین است 0.0 (کاملا شفاف) و 1.0 (کاملاً مات). مثال: rgba(0, 0, 255, 0.3); // به صورت آبی با کدورت |
| hsl(رنگ، اشباع، سبک) | یک رنگ را با استفاده از مدل Hue-Saturation-Lightness (HSL) تنظیم می کند - و نشان دهنده یک نمایش مختصات استوانه ای از رنگ ها است. رنگ یک است درجه روی چرخ رنگ (از 0 تا 360) - 0 یا 360 قرمز است، 120 سبز است، 240 آبی است. اشباع یک مقدار درصد است. 0% به معنی سایه خاکستری و 100% تمام رنگ است. سبکی نیز یک درصد است. 0٪ سیاه و سفید است، 100٪ است سفید. مثال: hsl(120، 100، 50%); // سبز hsl(120، 100% 75 درصد؛ // سبز روشن hsl(120، 100، 25%); // سبز تیره hsl(120, 60%, 70 درصد؛ // سبز پاستلی |
| hsla(رنگ، اشباع، سبکی، آلفا) | یک رنگ را با استفاده از مدل Hue-Saturation-Lightness-Alpha (HSLA) تنظیم می کند. HSLA مقادیر رنگ بسط مقادیر رنگ HSL با کانال آلفا هستند - که کدورت رنگ را مشخص می کند. پارامتر آلفا یک عدد است بین 0.0 (کاملا شفاف) و 1.0 (کاملاً مات). مثال: hsl(120، 100%, 50%, 0.3); // سبز با کدورت hsl (120، 100٪، 75٪، 0.3)؛ // سبز روشن با کدورت |
| مقیاس خاکستری(رنگ) | رنگ خاکستری را با روشنایی مشابه color تنظیم می کند. مثال: مقیاس خاکستری(#7fffd4)؛ نتیجه: #c6c6c6 |
| مکمل(رنگ) | رنگی را تنظیم می کند که رنگ مکمل color باشد. مثال: complement(#7fffd4)؛ نتیجه: #ff7faa |
| معکوس (رنگ، وزن) | رنگی را تنظیم می کند که رنگ معکوس یا منفی color باشد. پارامتر weight اختیاری است و باید عددی بین 0٪ باشد و 100 درصد پیش فرض 100% است. مثال: invert(white); نتیجه: سیاه |
Sass Get Color Functions
| تابع | توضیحات & مثال |
|---|---|
| قرمز(رنگ) | مقدار قرمز color را به صورت عددی بین 0 تا 255 برمیگرداند. مثال: red(#7fffd4); نتیجه: 127 red(red); نتیجه: 255 |
| سبز(رنگ) | مقدار سبز color را به صورت عددی بین 0 تا 255 برمیگرداند. مثال: سبز(#7fffd4)؛ نتیجه: 255 سبز(آبی)؛ نتیجه: 0 |
| آبی(رنگ) | مقدار آبی color را به صورت عددی بین 0 تا 255 برمیگرداند. مثال: آبی(#7fffd4)؛ نتیجه: 212 آبی(آبی); نتیجه: 255 |
| رنگ (رنگ) | رنگ color را به صورت عددی بین 0 تا 255 درجه برمیگرداند. مثال: hue(#7fffd4)؛ نتیجه: 160 درجه |
| اشباع (رنگ) | اشباع HSL color را به صورت عددی بین 0% و 100% مثال: اشباع (#7fffd4)؛ نتیجه: 100% |
| سبکی (رنگ) | روشنی HSL color را به صورت عددی بین 0% و 100% مثال: lightness(#7fffd4)؛ نتیجه: 74.9% |
| آلفا(رنگ) | کانال آلفای color را به صورت عددی بین 0 و 1 برمیگرداند. مثال: alpha(#7fffd4); نتیجه: 1 |
| مادری (رنگ) | کانال آلفای color را به صورت عددی بین 0 و 1 برمیگرداند. مثال: opacity(rgba(127, 255, 212, 0.5); نتیجه: 0.5 |
Sass Manipulate Color Functions
| تابع | توضیحات & مثال |
|---|---|
| مخلوط (color1، color2، وزن) | رنگی را ایجاد می کند که ترکیبی از color1 و color2 است. پارامتر weight باید بین 0٪ و 100٪ باشد. یک وزن بزرگتر به این معنی است که بیشتر از color1 باید استفاده شود. وزن کمتر به این معنی است که بیشتر است رنگ2 باید استفاده شود. پیش فرض 50% است. |
| adjust-hue(color, درجه) | رنگ رنگ را با درجه ای از -360 درجه تا 360 درجه تنظیم می کند. مثال: adjust-hue(#7fffd4, 80deg)؛ نتیجه: #8080ff |
| adjust-color(color، قرمز، سبز، آبی، رنگ، اشباع، سبک، آلفا) | یک یا چند پارامتر را با مقدار مشخص شده تنظیم می کند. این تابع مقدار مشخص شده را به/از مقدار رنگ موجود اضافه یا کم می کند. مثال: adjust-color(#7fffd4، آبی: 25)؛ نتیجه: |
| تغییر رنگ(رنگ، قرمز، سبز، آبی، رنگ، اشباع، سبک، آلفا) | یک یا چند پارامتر از یک رنگ را روی مقادیر جدید تنظیم می کند. مثال: change-color(#7fffd4, red: 255)؛ نتیجه: #ffffd4 |
| مقیاس رنگ(رنگ، قرمز، سبز، آبی، اشباع، سبکی، آلفا) | یک یا چند پارامتر color را مقیاس میکند. |
| rgba(رنگ، آلفا) | یک رنگ جدید از رنگ با آلفا داده شده ایجاد می کند کانال. مثال: rgba(#7fffd4، 30%)؛ نتیجه: rgba(127, 255, 212, 0.3) |
| روشن (رنگ، مقدار) | یک رنگ روشن تر از رنگ با مقدار ایجاد می کند بین 0 تا 100 درصد پارامتر مقدار، سبکی HSL را افزایش می دهد آن درصد. |
| تاریک (رنگ، مقدار) | یک رنگ تیره تر از رنگ با مقدار بین 0% و 100% پارامتر مقدار، سبکی HSL را با آن کاهش می دهد درصد. |
| اشباع (رنگ، مقدار) | یک رنگ اشباعتر از رنگ با مقدار ایجاد میکند بین 0 تا 100 درصد پارامتر مقدار اشباع HSL را افزایش می دهد آن درصد. |
| غیراشباع (رنگ، مقدار) | یک رنگ کمتر اشباع از رنگ با مقدار ایجاد می کند بین 0 تا 100 درصد پارامتر مقدار اشباع HSL را کاهش می دهد آن درصد. |
| مادر کردن(رنگ، مقدار) | رنگ مات تری از رنگ با مقدار ایجاد می کند بین 0 و 1. پارامتر مقدار کانال آلفا را با آن افزایش می دهد مقدار. |
| محو شدن (رنگ، مقدار) | رنگ مات تری از رنگ با مقدار ایجاد می کند بین 0 و 1. پارامتر مقدار کانال آلفا را تا آن اندازه افزایش می دهد مقدار. |
| شفاف سازی (رنگ، مقدار) | رنگ شفاف تری از رنگ با مقدار ایجاد می کند بین 0 و 1. پارامتر مقدار کانال آلفا را با آن کاهش می دهد مقدار. |
| محو شدن (رنگ، مقدار) | رنگ شفاف تری از رنگ با مقدار ایجاد می کند بین 0 و 1. پارامتر مقدار کانال آلفا را با آن کاهش می دهد مقدار. |