الفرق بين المراجعتين لصفحة: «Sass/hsl»

من موسوعة حسوب
ط مراجعة الصفحة وتدقيقها.
لا ملخص تعديل
سطر 1: سطر 1:
تُنشئ الدالة <code>hsl()‎</code> لونًا جديدًا انطلاقا من قيم الصبغة (hue) والتشبُّع (saturation) والإضاءة (lightness). تستخدم هذه الدالة [http://www.w3.org/TR/css3-color/#hsl-color خوارزمية] من مواصفات [[CSS|CSS]].<noinclude>{{DISPLAYTITLE: الدالة <code>()hsl</code> في Sass
تُنشئ الدالة <code>hsl()‎</code> لونًا جديدًا انطلاقًا من قيم الصبغة (hue) والتشبُّع (saturation) والإضاءة (lightness). تستخدم هذه الدالة [http://www.w3.org/TR/css3-color/#hsl-color خوارزمية] من مواصفات [[CSS|CSS]].<noinclude>{{DISPLAYTITLE: الدالة <code>()hsl</code> في Sass
}}</noinclude>
}}</noinclude>


سطر 25: سطر 25:


== أمثلة ==
== أمثلة ==
المثال 1: ضبط لون العنصر (color) باستخدام الدالة <code>hsl()‎</code>.<syntaxhighlight lang="sass">
مثال عن ضبط لون العنصر (<code>[[CSS/color|color]]</code>) باستخدام الدالة <code>hsl()‎</code>:<syntaxhighlight lang="sass">
.selector {
.selector {
   color: hsl(50, 50, 50); // #bfaa40
   color: hsl(50, 50, 50); // #bfaa40
سطر 32: سطر 32:
</syntaxhighlight>ستُصرَّف الشيفرة السابقة إلى:<syntaxhighlight lang="css">
</syntaxhighlight>ستُصرَّف الشيفرة السابقة إلى:<syntaxhighlight lang="css">
.selector {
.selector {
   color: #bfaa40;
   color: #bfaa40; }
}
 
</syntaxhighlight>
</syntaxhighlight>


== انظر أيضًا ==
== انظر أيضًا ==
* الدالة <code>[[Sass/hsla|hsla()]]</code>‎: تُنشئ لونًا انطلاقا من قيم الصبغة والتشبُّع والإضاءة والشفافيَّة.
* الدالة <code>[[Sass/hsla|hsla()]]</code>‎: تُنشئ لونًا انطلاقًا من قيم الصبغة والتشبُّع والإضاءة والشفافيَّة.
* الدالة <code>[[Sass/adjust color|adjust_color()]]‎</code>: تزيد أو تقلِّل قيمة خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد.
* الدالة <code>[[Sass/adjust color|adjust_color()]]‎</code>: تزيد أو تقلِّل قيمة خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد.



مراجعة 06:37، 9 مايو 2018

تُنشئ الدالة hsl()‎ لونًا جديدًا انطلاقًا من قيم الصبغة (hue) والتشبُّع (saturation) والإضاءة (lightness). تستخدم هذه الدالة خوارزمية من مواصفات CSS.

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

hsl($hue, $saturation, $lightness)

المعاملات

‎$hue

قيمة صبغة اللون. يجب أن تكون بين 0 و 360 درجة.

‎$saturation

قيمة تشبُّع اللون. يجب أن تترواح بين ‎0% و ‎100%.

‎$lightness 

قيمة إضاءة اللون. يجب أن تكون بين ‎0%‎ و ‎100%.

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

تُعاد قيمة اللون الناتج.

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

سيُرمى الخطأ ArgumentError إن كانت المعاملات من النوع الخطأ أو كانت قيمة المعامل ‎$lightness والمعامل ‎$saturation خارج المجال المسموح.

أمثلة

مثال عن ضبط لون العنصر (color) باستخدام الدالة hsl()‎:

.selector {
  color: hsl(50, 50, 50); // #bfaa40
}

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

.selector {
  color: #bfaa40; }

انظر أيضًا

  • الدالة hsla()‎: تُنشئ لونًا انطلاقًا من قيم الصبغة والتشبُّع والإضاءة والشفافيَّة.
  • الدالة adjust_color(): تزيد أو تقلِّل قيمة خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد.

مصادر