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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
سطر 1: سطر 1:
تُنشئ لونًا انطلاقا من قيم الصبغة (hue) والتشبع (saturation) والإضاءة (lightness) والشفافية (alpha). تستخدم الدالة [http://www.w3.org/TR/css3-color/#hsl-color خوارزمية] من مواصفات [[CSS|CSS3]].<noinclude>{{DISPLAYTITLE: الدالة <code>()hsla</code> في Sass
+
تُنشئ لونًا انطلاقا من قيم الصبغة (hue) والتشبع (saturation) والإضاءة (lightness) والشفافية (alpha). تستخدم الدالة [http://www.w3.org/TR/css3-color/#hsl-color خوارزمية] من مواصفات [[CSS|CSS]].<noinclude>{{DISPLAYTITLE: الدالة <code>()hsla</code> في Sass
 
}}</noinclude>
 
}}</noinclude>
  
 
== البنية العامة ==
 
== البنية العامة ==
 
<syntaxhighlight lang="sass">
 
<syntaxhighlight lang="sass">
hsl($hue, $saturation, $lightness, $alpha)
+
hsla($hue, $saturation, $lightness, $alpha)
 
</syntaxhighlight>
 
</syntaxhighlight>
  
سطر 25: سطر 25:
  
 
== الأخطاء والاستثناءات ==
 
== الأخطاء والاستثناءات ==
سيُرمى الخطأ <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: hsl(50, 50, 50); // #bfaa40
 +
}
 +
 
 +
</syntaxhighlight>ستُصرّف الشيفرة السابقة إلى شيفرة CSS الآتية:<syntaxhighlight lang="css">
 +
.selector {
 +
  color: #bfaa40;
 +
}
 +
 
 +
</syntaxhighlight>
  
 
== انظر أيضًا ==
 
== انظر أيضًا ==
* الدالة <code>[[Sass/hsl|'''hsl'''()]]</code>‎:تُنشئ لونًا انطلاقا من قيم الصبغة والتشبع والإضاءة والشفافية.
+
* الدالة <code>[[Sass/hsl|hsl()]]</code>‎: تُنشئ لونًا انطلاقًا من قيم الصبغة والتشبع والإضاءة.
  
 
== مصادر ==
 
== مصادر ==
* [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]]
 
[[تصنيف: Sass Function]]
 
[[تصنيف: Sass Function]]

مراجعة 04:46، 21 أبريل 2018

تُنشئ لونًا انطلاقا من قيم الصبغة (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: hsl(50, 50, 50); // #bfaa40
}

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

.selector {
  color: #bfaa40;
}

انظر أيضًا

  • الدالة hsl()‎: تُنشئ لونًا انطلاقًا من قيم الصبغة والتشبع والإضاءة.

مصادر