الدالة ()hue في Sass

تُعيدُ الدالة ()hue قيمة مُكوّن الصبغة للون الممرَّر إليها.

البنية العامة

hue($color)

المعاملات

‎$color

القيمة اللونية التي نريد الحصول على مكوِّن الصبغة الخاص بها.

القيم المعادة

تُعاد قيمة الصبغة للون ‎$color، وتكون بين 0 و 360 درجة (deg).

الأخطاء والاستثناءات

سيُرمى الخطأ ArgumentError إن لم يكن المعامل ‎$color لونًا.

أمثلة

تسمح الدالة adjust_hue()‎ بتغيير قيمة الصبغة لكن نسبةً إلى قيمة الصبغة الحالية، أي لو كان لدينا اللون الأصفر yellow وأدرنا دائرة الصبغة بمقدار 180 درجة، فسنحصل على اللون الأزرق blue:

.selector {
  color: adjust-hue(yellow, 180); // blue
}

لكن لا توجد دالة في Sass تسمح بضبط قيمة الصبغة إلى درجة لونية مُحدَّدة مباشرةً؛ ولذلك الغرض نستطيع استخدام الدالة hue()‎ للحصول على درجة الصبغة اللونية الحالية، ونطرحها من قيمة درجة الصبغة المطلوبة، ثم نستخدم الدالة adjust_hue()‎ على القيمة النهائية:

@function set-hue($color, $target-hue) {
  $current-hue: hue($color); // الحصول على قيمة الصبغة الحالية
  $degrees: $target-hue - $current-hue; // طرح قيمة الصبغة الحالية من قيمة الصبغة الهدف
  @return adjust-color($color, $hue: $degrees); // ضبط قيمة الصبغة
}

.selector {
  color: set-hue(yellow, 180); // cyan
}

ستُصرّف الشيفرة السابقة إلى شيفرة CSS الآتية:

.selector {
  color: cyan; }

انظر أيضًا

• الدالة ()saturation: تعيدُ قيمة مُكوّن التشبع للون الممرَّر إليها.
• الدالة ()lightness: تعيدُ قيمة مُكوّن السطوع للون الممرَّر إليها.
• الدالة red()‎: تعيد قيمة المكوِّن الأحمر للون الممرَّر إليها.
• الدالة ()blue‎: تعيد قيمة المكوِّن الأزرق للون الممرَّر إليها.
• الدالة ()green‎: تعيد قيمة المكوِّن الأخضر للون الممرَّر إليها.
• الدالة hsl()‎: تنشئ لونًا انطلاقًا من قيم الصبغة والتشبع والسطوع.
• الدالة adjust_hue()‎: تغيّر قيمة مكوِّن الصبغة (hue) للون الممرَّر إليها.

مصادر

• قسم الدالة hue في صفحة الدوال في توثيق Sass الرسمي.