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

المراجعة الحالية بتاريخ 06:59، 20 مايو 2018

تنشئ الدالة hsla()‎ لونًا انطلاقًا من قيم الصبغة (hue) والتشبُّع (saturation) والسطوع (lightness) والشفافيَّة (alpha). تستخدم الدالة خوارزمية من مواصفات CSS.

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

hsla($hue, $saturation, $lightness, $alpha)

المعاملات

`‎$hue`

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

`‎$saturation`

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

`‎$lightness`

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

`‎$alpha`

قيمة شفافيَّة اللون. يجب أن تكون بين 0 و 1.

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

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

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

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

أمثلة

مثال عن ضبط قيمة الخاصية color باستخدام الدالة hsla()‎:

.selector {
  color: hsla(50, 50, 50, 0.5); // rgba(191, 170, 64, 0.5);
}

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

.selector {
  color: rgba(191, 170, 64, 0.5); }

انظر أيضًا

الدالة hsl()‎: تنشئ لونًا انطلاقًا من قيم الصبغة والتشبُّع والسطوع.
الدالة adjust_color()‎: تزيد أو تقلِّل قيمة خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد.
الدالة ()scale_color: تعدِّل مكوِّنًا واحدًا أو أكثر للون الممرَّر إليها بتدرج انسيابي (Fluidly scales).

مصادر

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

@@ سطر 1: / سطر 1: @@
-تُنشئ لونًا انطلاقا من قيم الصبغة (hue) والتشبع (saturation) والإضاءة (lightness) والشفافية (alpha). تستخدم الدالة [http://www.w3.org/TR/css3-color/#hsl-color خوارزمية] من مواصفات [[CSS|CSS3]].<noinclude>{{DISPLAYTITLE: الدالة <code>()hsla</code> في Sass
+تنشئ الدالة <code>hsla()‎</code> لونًا انطلاقًا من قيم الصبغة (hue) والتشبُّع (saturation) والسطوع (lightness) والشفافيَّة (alpha). تستخدم الدالة [http://www.w3.org/TR/css3-color/#hsl-color خوارزمية] من مواصفات [[CSS|CSS]].<noinclude>{{DISPLAYTITLE: الدالة <code>()hsla</code> في Sass
 }}</noinclude>
 == البنية العامة ==
 <syntaxhighlight lang="sass">
-hsl($hue, $saturation, $lightness, $alpha)
+hsla($hue, $saturation, $lightness, $alpha)
 </syntaxhighlight>
@@ سطر 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>‎$alpha</code> ===
-شفافية اللون. يجب أن تكون بين <code>0</code> و <code>1</code>.
+قيمة شفافيَّة اللون. يجب أن تكون بين 0 و 1.
 == القيم المعادة ==
-اللون الناتج.
+تُعاد قيمة اللون الناتج.
 == الأخطاء والاستثناءات ==
-سيُرمى الخطأ <code>ArgumentError</code> إن كانت المعاملات من النوع الخاطئ أو كان <code>‎$lightness أو ‎$saturation</code> أو <code>‎$alpha</code> خارج الحدود.
+سيُرمى الخطأ <code>ArgumentError</code> إن كانت المعاملات من النوع الخطأ أو كانت قيمة المعاملات <code>‎$lightness</code> أو <code>‎$saturation</code> أو <code>‎$alpha</code> خارج المجال المسموح.
+== أمثلة ==
+مثال عن ضبط قيمة الخاصية <code>[[CSS/color|color]]</code> باستخدام الدالة <code>hsla()‎</code>:<syntaxhighlight lang="sass">
+.selector {
+  color: hsla(50, 50, 50, 0.5); // rgba(191, 170, 64, 0.5);
+}
+</syntaxhighlight>ستُصرّف الشيفرة السابقة إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css">
+.selector {
+  color: rgba(191, 170, 64, 0.5); }
+</syntaxhighlight>
 == انظر أيضًا ==
-* الدالة <code>[[Sass/hsl|'''hsl'''()]]</code>‎:تُنشئ لونًا انطلاقا من قيم الصبغة والتشبع  والإضاءة والشفافية.
+* الدالة <code>[[Sass/hsl|hsl()]]</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#hsla-instance_method قسم الدالة  في صفحة الدوال في توثيق Sass الرسمي.]
+* [https://sass-lang.com/documentation/Sass/Script/Functions.html#hsla-instance_method قسم الدالة hsla في صفحة الدوال في توثيق Sass الرسمي].
-[[تصنيف:Sass]]
+[[تصنيف:Sass|{{SUBPAGENAME}}]]
-[[تصنيف: Sass Function]]
+[[تصنيف: Sass Function|{{SUBPAGENAME}}]]