الفرق بين المراجعتين ل"Sass/hsl"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
 
(6 مراجعات متوسطة بواسطة 3 مستخدمين غير معروضة)
سطر 1: سطر 1:
تُنشئ لونًا انطلاقا من قيم الصبغة (hue) والتشبع (saturation) والإضاءة (lightness). تستخدم الدالة [http://www.w3.org/TR/css3-color/#hsl-color خوارزمية] من مواصفات [[CSS|CSS3]].<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>
  
سطر 10: سطر 10:
  
 
=== <code>‎$hue</code> ===
 
=== <code>‎$hue</code> ===
صبغة اللون. يجب أن تكون بين <code>0</code> و <code>360</code> درجة.
+
قيمة صبغة اللون. يجب أن تكون بين 0 و 360 درجة.
  
 
=== <code>‎$saturation</code> ===
 
=== <code>‎$saturation</code> ===
تشبُّع اللون. يجب أن يكون محصورًا بين ‎<code>0%‎</code> و  ‎<code>100%</code>.
+
قيمة تشبُّع اللون. يجب أن تترواح بين ‎0% و  ‎100%.
  
 
=== <code>‎$lightness </code> ===
 
=== <code>‎$lightness </code> ===
إضاءة اللون. يجب أن تكون بين ‎<code>0%‎</code> و  ‎<code>100%</code>.
+
قيمة سطوع اللون. يجب أن تكون بين ‎0%‎ و  ‎100%.
  
 
== القيم المعادة ==
 
== القيم المعادة ==
اللون الناتج.
+
تُعاد قيمة اللون الناتج.
  
 
== الأخطاء والاستثناءات ==
 
== الأخطاء والاستثناءات ==
سيُرمى الخطأ <code>ArgumentError</code> إن كانت المعاملات من النوع الخاطئ أو كان <code>‎$lightness و ‎$saturation</code> خارج الحدود.
+
سيُرمى الخطأ <code>ArgumentError</code> إن كانت المعاملات من النوع الخطأ أو كانت قيمة المعامل <code>‎$lightness</code> والمعامل <code>‎$saturation</code> خارج المجال المسموح.
 +
 
 +
== أمثلة ==
 +
مثال عن ضبط لون العنصر (<code>[[CSS/color|color]]</code>) باستخدام الدالة <code>hsl()‎</code>:<syntaxhighlight lang="sass">
 +
.selector {
 +
  color: hsl(50, 50, 50); // #bfaa40
 +
}
 +
 
 +
</syntaxhighlight>ستُصرَّف الشيفرة السابقة إلى:<syntaxhighlight lang="css">
 +
.selector {
 +
  color: #bfaa40; }
 +
</syntaxhighlight>
  
 
== انظر أيضًا ==
 
== انظر أيضًا ==
* الدالة <code>[[Sass/hsla|'''hsla'''()]]</code>‎: تُنشئ لونا انطلاقا من المركبات اللونية الثلاث والشفافية..
+
* الدالة <code>[[Sass/hsla|hsla()]]</code>‎: تُنشئ لونًا انطلاقًا من قيم الصبغة والتشبُّع والسطوع والشفافيَّة.
 +
* الدالة <code>[[Sass/adjust color|adjust_color()]]‎</code>: تزيد أو تقلِّل قيمة خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد.
 +
* الدالة <code>[[Sass/scale color|()scale_color]]</code>: تعدِّل مكوِّنًا واحدًا أو أكثر للون الممرَّر إليها بتدرج انسيابي (Fluidly scales).
  
 
== مصادر ==
 
== مصادر ==
* [https://sass-lang.com/documentation/Sass/Script/Functions.html#hsl-instance_method قسم الدالة  في صفحة الدوال في توثيق Sass الرسمي.]
+
* [https://sass-lang.com/documentation/Sass/Script/Functions.html#hsl-instance_method قسم الدالة hsl في صفحة الدوال في توثيق Sass الرسمي].
[[تصنيف:Sass]]
+
[[تصنيف:Sass|{{SUBPAGENAME}}]]
[[تصنيف: Sass Function]]
+
[[تصنيف: Sass Function|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 07:01، 20 مايو 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(): تزيد أو تقلِّل قيمة خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد.
  • الدالة ()scale_color: تعدِّل مكوِّنًا واحدًا أو أكثر للون الممرَّر إليها بتدرج انسيابي (Fluidly scales).

مصادر