رنگ ها (Color)

در Sass، «توابع رنگ Sass» رنگ می سازند، می خوانند، و تغییر می دهند. مثل نقاشی دیجیتال است. اول رنگ می سازیم، بعد مقدارش را می گیریم، و گاهی آن را دست کاری می کنیم.

توابع ساخت رنگ (Set Color)

«مدل RGB» با سه مقدار قرمز، سبز، آبی رنگ می سازد. «Alpha» میزان شفافیت است.

.rgb-demo {
  color: rgb(0, 0, 255);
}
.rgba-demo {
  color: rgba(0, 0, 255, 0.3);
}

مشاهده در ادیتور

«مدل HSL» با «Hue» زاویه رنگ، «Saturation» شدت، و «Lightness» روشنی کار می کند.

.hsl-demo {
  color: hsl(120, 100%, 50%);
}
.hsla-demo {
  color: hsla(120, 100%, 50%, 0.3);
}

مشاهده در ادیتور

توابع کمکی: «grayscale» خاکستری می دهد، «complement» رنگ مکمل می دهد، «invert» وارونه می کند.

.gray-demo {
  color: grayscale(#7fffd4);
}
.comp-demo {
  color: complement(#7fffd4);
}
.invert-demo {
  color: invert(white);
}

مشاهده در ادیتور

توابع خواندن رنگ (Get Color)

این توابع مولفه ها را برمی گردانند. مثل خواندن نمرات یک کارنامه.

.get-rgb {
  --r: red(#7fffd4);
  --g: green(#7fffd4);
  --b: blue(#7fffd4);
}
.get-hsl {
  --h: hue(#7fffd4);
  --s: saturation(#7fffd4);
  --l: lightness(#7fffd4);
}
.get-alpha {
  --a1: alpha(#7fffd4);
  --a2: opacity(rgba(127, 255, 212, 0.5));
}

مشاهده در ادیتور

توابع دست کاری رنگ (Manipulate Color)

«mix» رنگ ها را قاطی می کند. «adjust-hue» زاویه رنگ را جابه جا می کند.

.mix-demo {
  color: mix(#ff0000, #0000ff, 50%);
}
.adjust-demo {
  color: adjust-hue(#7fffd4, 80deg);
}

مشاهده در ادیتور

«lighten» روشن تر می کند. «darken» تیره تر می کند. «saturate» و «desaturate» شدت رنگ را تغییر می دهند.

.light-dark {
  --light: lighten(#7fffd4, 10%);
  --dark: darken(#7fffd4, 10%);
}
.sat-demo {
  --sat: saturate(#7fffd4, 15%);
  --desat: desaturate(#7fffd4, 15%);
}

مشاهده در ادیتور

«opacify / fade-in» شفافیت را کم می کند. «transparentize / fade-out» شفافیت را زیاد می کند.

.alpha-tools {
  --more-opaque: opacify(rgba(127, 255, 212, 0.3), 0.2);
  --more-transp: transparentize(rgba(127, 255, 212, 0.3), 0.2);
}
.rgba-shortcut {
  color: rgba(#7fffd4, 30%);
}

مشاهده در ادیتور

نکته: برای قواعد عمومی، بخش درون نگری (Introspection) و انتخابگرها (Selector) را هم ببین. همچنین، مرجع خود همین صفحه: توابع رنگ Sass.

سه گام تمرین سریع

1. با rgb و rgba دکمه ای آبی بساز.
2. با hsl سه سبز روشن، معمولی، تیره بساز.
3. با adjust-hue رنگ را به بنفش بچرخان.

جمع بندی سریع

• RGB/HSL برای ساخت رنگ ها عالی اند.
• توابع Get، مولفه ها را می خوانند.
• lighten/darken روشنایی را تنظیم می کنند.
• transparentize/opacify شفافیت را تغییر می دهند.