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

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

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

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

hsl($hue, $saturation, $lightness)

المعاملات

`‎$hue`

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

`‎$saturation`

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

`‎$lightness`

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

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

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

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

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

أمثلة

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

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

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

.selector {
  color: #bfaa40;
}

انظر أيضًا

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

مصادر

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

@@ سطر 1: / سطر 1: @@
-تُنشئ لونًا انطلاقا من قيم الصبغة (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>
@@ سطر 10: / سطر 10: @@
 === <code>‎$hue</code> ===
-صبغة اللون. يجب أن تكون بين <code>0</code> و <code>360</code> درجة.
+قيمة صبغة اللون. يجب أن تكون بين 0 و 360 درجة.
 === <code>‎$saturation</code> ===
-تشبُّع اللون. يجب أن يكون محصورًا بين ‎<code>0%‎</code> و  ‎<code>100%</code>.
+قيمة تشبُّع اللون. يجب أن تترواح بين ‎0% و  ‎100%.
 === <code>‎$lightness </code> ===
-إضاءة اللون. يجب أن تكون بين  ‎<code>0%‎</code> و  ‎<code>100%</code>.
+قيمة إضاءة اللون. يجب أن تكون بين ‎0%‎ و  ‎100%.
 == القيم المعادة ==
-اللون الناتج.
+تُعاد قيمة اللون الناتج.
 == الأخطاء والاستثناءات ==
-سيُرمى الخطأ <code>ArgumentError</code> إن كانت المعاملات من النوع الخطأ أو كان <code>‎$lightness</code> و <code>‎$saturation</code> خارج الحدود.
+سيُرمى الخطأ <code>ArgumentError</code> إن كانت المعاملات من النوع الخطأ أو كانت قيمة المعامل <code>‎$lightness</code> والمعامل <code>‎$saturation</code> خارج المجال المسموح.
 == أمثلة ==
-مثال عن ضبط لون العنصر (color) باستخدام الدالة hsl()‎:<syntaxhighlight lang="sass">
+المثال 1: ضبط لون العنصر (color) باستخدام الدالة <code>hsl()‎</code>.<syntaxhighlight lang="sass">
 .selector {
    color: hsl(50, 50, 50); // #bfaa40
 }
-</syntaxhighlight>ستُصرَّف الشيفرة السابقة إلى الناتج الآتي:<syntaxhighlight lang="css">
+</syntaxhighlight>ستُصرَّف الشيفرة السابقة إلى:<syntaxhighlight lang="css">
 .selector {
    color: #bfaa40;
@@ سطر 38: / سطر 38: @@
 == انظر أيضًا ==
-* الدالة <code>[[Sass/hsla|hsla()]]</code>‎: تُنشئ لونًا انطلاقا من قيم الصبغة والتشبع والإضاءة والشفافية.
+* الدالة <code>[[Sass/hsla|hsla()]]</code>‎: تُنشئ لونًا انطلاقا من قيم الصبغة والتشبُّع والإضاءة والشفافيَّة.
+* الدالة <code>[[Sass/adjust color|adjust_color()]]‎</code>: تزيد أو تقلِّل قيمة خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد.
 == مصادر ==