الدالة ()hue في Sass
< 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) للون الممرَّر إليها.