آموزش انجام عملیات ریاضی بر روی Color Operations در Sass

Color Operations

Sass این قابلیت را در اختیار توسعه دهنده قرار می دهد که بر روی کامپوننت ها و مقادیر رنگ، عملیات ریاضی را پیاده سازی کند. این عملیات و محاسبات که با مقادیر رنگ قابل است، به نوبت بر روی کامپوننت های رنگ انجام می شود. بدین معنی که عملیات ریاضی مربوطه به ترتیب بر روی هر یک از کامپوننت های red، green و نهایتا blue اجرا می شود. مثال:

p {
  color: #010203 + #040506;
}

کد بالا به این صورت محاسبه می شود: 03 + 06 = 09 و 01 + 04 = 05, 02 + 05 = 07,. سپس به کد زیر ترجمه (compile) می گردد:

p {
  color: #050709;
}

در بیشتر مواقع توصیه می شود جهت رسیدن به نتیجه ی یکسان، بجای استفاده از عملیات محاسباتی و ریاضی (color arithmetic)، از توابع اختصاصی مربوط به رنگ (color functions) استفاده نمایید.

این امکان نیز وجود دارد که بین اعداد و مقادیر رنگ عملیات محاسباتی و ریاضی انجام داد. لازم به ذکر است که این نوع عملیات مانند نمونه ی قبلی، به ترتیب بر روی کامپوننت ها اجرا می شود. مثال:

p {
  color: #010203 * 2;
}

کد بالا به این صورت محاسبه می شود: 03 * 2 = 06, و 01 * 2 = 02, 02 * 2 = 04,. سپس به قطعه کد زیر کامپایل می گردد:

p {
  color: #020406;
}

توجه داشته باشید آن دسته از رنگ هایی که دارای کانال آلفا هستند (آن رنگ هایی که با توابع rgba و hsla ایجاد شده اند) بایستی دارای مقدار آلفا یکسان باشند تا عملیات ریاضی و محاسباتی مورد نظر بر روی آن ها قابل اجرا باشد. عملیات ریاضی مقدار آلفا را تغییر نمی دهد. مثال:

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

به کد زیر کامپایل می شود:

p {
  color: rgba(255, 255, 0, 0.75);
}

کانال آلفا یک رنگ را می توان با توابع opacify و transparentize تنظیم کرد. مثال:

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

به کد زیر کامپایل می شود:

p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); }

در مرورگر IE لازم است که تمامی رنگ ها لایه ی آلفا را داشته باشند و نیز با فرمت دقیق #AABBCCDD نوشته شوند. شما می توانید به راحتی با استفاده از تابع ie_hex_str، رنگ را تبدیل نمایید. مثال:

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}

به قطعه کد زیر کامپایل می شود:

div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}