الفرق بين المراجعتين لصفحة: «Sass/hue»
< Sass
جميل-بيلوني (نقاش | مساهمات) ط مراجعة الصفحة وتدقيقها. |
لا ملخص تعديل |
||
سطر 3: | سطر 3: | ||
== البنية العامة == | == البنية العامة == | ||
<syntaxhighlight lang="sass"> | <syntaxhighlight lang="sass"> | ||
hue($color) | |||
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 16: | سطر 16: | ||
== الأخطاء والاستثناءات == | == الأخطاء والاستثناءات == | ||
سيُرمى الخطأ <code>ArgumentError</code> إن لم يكن <code>$color</code> لونًا. | سيُرمى الخطأ <code>ArgumentError</code> إن لم يكن <code>$color</code> لونًا. | ||
== أمثلة == | |||
تسمح الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code> بتغيير قيمة الصبغة لكن نسبةً إلى قيمة الصبغة الحالية، أي لو كان لدينا اللون الأصفر <code>yellow</code> وأدرنا دائرة الصبغة بمقدار 180 درجة، فسنحصل على اللون الأزرق <code>blue</code>:<syntaxhighlight lang="sass"> | |||
.selector { | |||
color: adjust-hue(yellow, 180); // blue | |||
} | |||
</syntaxhighlight>لكن لا توجد دالة في Sass تسمح بضبط قيمة الصبغة إلى درجة لونية مُحدَّدة مباشرةً؛ ولذلك الغرض نستطيع استخدام الدالة <code>hue()</code> للحصول على درجة الصبغة اللونية الحالية، ونطرحها من قيمة درجة الصبغة المطلوبة، ثم نستخدم الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code> على القيمة النهائية:<syntaxhighlight lang="sass"> | |||
@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 | |||
} | |||
</syntaxhighlight>ستُصرّف الشيفرة السابقة إلى شيفرة CSS الآتية:<syntaxhighlight lang="css"> | |||
.selector { | |||
color: cyan; } | |||
</syntaxhighlight> | |||
== انظر أيضًا == | == انظر أيضًا == | ||
سطر 23: | سطر 45: | ||
*الدالة <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>: تغيّر صبغة (hue) اللون بيمرر لها اللون وعدد الدرجات المراد دورانها. | |||
== مصادر == | == مصادر == |
مراجعة 07:45، 9 مايو 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) اللون بيمرر لها اللون وعدد الدرجات المراد دورانها.