الفرق بين المراجعتين ل"Sass/hue"
< Sass
اذهب إلى التنقل
اذهب إلى البحث
جميل-بيلوني (نقاش | مساهمات) ط |
|||
| سطر 15: | سطر 15: | ||
== الأخطاء والاستثناءات == | == الأخطاء والاستثناءات == | ||
| − | سيُرمى الخطأ <code>ArgumentError</code> إن لم يكن <code>$color</code> لونًا. | + | سيُرمى الخطأ <code>ArgumentError</code> إن لم يكن المعامل <code>$color</code> لونًا. |
== أمثلة == | == أمثلة == | ||
| سطر 40: | سطر 40: | ||
== انظر أيضًا == | == انظر أيضًا == | ||
| − | *الدالة <code>[[Sass/saturation|()saturation]]</code>: | + | *الدالة <code>[[Sass/saturation|()saturation]]</code>: تعيدُ قيمة مُكوّن التشبع للون الممرَّر إليها. |
| − | *الدالة <code>[[Sass/lightness|()lightness]]</code>: | + | *الدالة <code>[[Sass/lightness|()lightness]]</code>: تعيدُ قيمة مُكوّن السطوع للون الممرَّر إليها. |
*الدالة <code>[[Sass/red|red()]]</code>: تعيد قيمة المكوِّن الأحمر للون الممرَّر إليها. | *الدالة <code>[[Sass/red|red()]]</code>: تعيد قيمة المكوِّن الأحمر للون الممرَّر إليها. | ||
*الدالة <code>[[Sass/blue|()blue]]</code>: تعيد قيمة المكوِّن الأزرق للون الممرَّر إليها. | *الدالة <code>[[Sass/blue|()blue]]</code>: تعيد قيمة المكوِّن الأزرق للون الممرَّر إليها. | ||
*الدالة <code>[[Sass/green|()green]]</code>: تعيد قيمة المكوِّن الأخضر للون الممرَّر إليها. | *الدالة <code>[[Sass/green|()green]]</code>: تعيد قيمة المكوِّن الأخضر للون الممرَّر إليها. | ||
| − | *الدالة <code>[[Sass/hsl|hsl()]]</code>: | + | *الدالة <code>[[Sass/hsl|hsl()]]</code>: تنشئ لونًا انطلاقًا من قيم الصبغة والتشبع والسطوع. |
| − | *الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code>: تغيّر | + | *الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code>: تغيّر قيمة مكوِّن الصبغة (hue) للون الممرَّر إليها. |
== مصادر == | == مصادر == | ||
مراجعة 14:25، 13 مايو 2018
تُعيدُ الدالة ()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) للون الممرَّر إليها.