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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE: الدالة ()adjust_color‎ في Sass}}</noinclude>
 
<noinclude>{{DISPLAYTITLE: الدالة ()adjust_color‎ في Sass}}</noinclude>
تزيد الدالة adjust_color أو تقلل خاصية واحدة أو أكثر من خاصيات لونٍ. يمكنها أن تُغيّر شفافية وتشبّع وقيمة اللون الأحمر والأخضر والأزرق. تُحدّد الخاصيات على شكل وسائط مُسمّاة، وتُضاف أو تُنقص من القيمة الحالية لخاصية اللون تلك.
+
تزيد الدالة <code>adjust_color</code> أو تقلل خاصية واحدة أو أكثر من خاصيات لونٍ. يمكنها أن تُغيّر شفافية وتشبّع وقيمة اللون الأحمر والأخضر والأزرق. تُحدّد الخاصيات على شكل وسائط مُسمّاة، وتُضاف أو تُنقص من القيمة الحالية لخاصية اللون تلك.
  
جميع الخاصيات اختيارية. كما لا يمكنك تحديد كلّ من خاصيات RGB‏ (‎$red و ‎$green و ‎$blue) وخاصيات HSL ‏(‎$hue و ‎$saturation و ‎$value) في نفس الوقت.
+
جميع الخاصيات اختيارية. كما لا يمكنك تحديد كلّ من خاصيات <code>RGB</code>‏ (‎<code>$red</code> و ‎<code>$green</code> و ‎<code>$blue</code>) وخاصيات <code>HSL</code> ‏(‎<code>$hue</code> و <code>‎$saturation</code> و ‎<code>$value</code>) في نفس الوقت.
  
 
== البنية العامة ==
 
== البنية العامة ==
سطر 9: سطر 9:
 
== المعاملات ==
 
== المعاملات ==
  
=== ‎$color ===
+
=== <code>‎$color</code> ===
 
اللون المراد تعديله.
 
اللون المراد تعديله.
  
=== ‎$red ===
+
=== <code>‎$red</code> ===
 
التعديل المُراد تطبيقه على المكون الأحمر، قيمتها بين ‎-255 و 255 مشمولة.
 
التعديل المُراد تطبيقه على المكون الأحمر، قيمتها بين ‎-255 و 255 مشمولة.
  
=== ‎$green ===
+
=== <code>‎$green</code> ===
 
التعديل المُراد تطبيقه على المكون الأخضر، قيمتها بين ‎-255 و 255 مشمولة.
 
التعديل المُراد تطبيقه على المكون الأخضر، قيمتها بين ‎-255 و 255 مشمولة.
  
=== ‎$blue ===
+
=== <code>‎$blue</code> ===
 
التعديل المُراد تطبيقه على المكون الأزرق، قيمتها بين ‎-255 و 255 مشمولة.
 
التعديل المُراد تطبيقه على المكون الأزرق، قيمتها بين ‎-255 و 255 مشمولة.
  
=== ‎$hue ===
+
=== <code>‎$hue</code> ===
 
التعديل المُراد تطبيقه على مكون الصبغة (hue)، قيمتها بالدرجات.
 
التعديل المُراد تطبيقه على مكون الصبغة (hue)، قيمتها بالدرجات.
  
=== ‎$saturation ===
+
=== <code>‎$saturation</code> ===
 
التعديل المُراد تطبيقه على مكون الإشباع، قيمتها بين ‎-100% و 100% مشمولة.
 
التعديل المُراد تطبيقه على مكون الإشباع، قيمتها بين ‎-100% و 100% مشمولة.
  
=== ‎$lightness ===
+
=== <code>‎$lightness</code> ===
 
التعديل المُراد تطبيقه على مكون الإضاءة، قيمتها بين ‎-100% و 100% مشمولة.
 
التعديل المُراد تطبيقه على مكون الإضاءة، قيمتها بين ‎-100% و 100% مشمولة.
  
=== ‎$alpha ===
+
=== <code>‎$alpha</code> ===
 
التعديل المُراد تطبيقه على مكون الشفافية، قيمتها بين ‎-1 و 1 مشمولة.
 
التعديل المُراد تطبيقه على مكون الشفافية، قيمتها بين ‎-1 و 1 مشمولة.
  
سطر 37: سطر 37:
  
 
== الأخطاء والاستثناءات ==
 
== الأخطاء والاستثناءات ==
سيُرمى الخطأ ArgumentError إذا كان أيٌّ من المعاملات من النوع الخاطئ أو خارج المجال المقبول، أو إذا عُدّلت خاصيات RGB وخاصيات HSL في نفس الوقت.
+
سيُرمى الخطأ <code>ArgumentError</code> إذا كان أيٌّ من المعاملات من النوع الخاطئ أو خارج المجال المقبول، أو إذا عُدّلت خاصيات <code>RGB</code> وخاصيات <code>HSL</code> في نفس الوقت.
  
 
== أمثلة ==
 
== أمثلة ==
مثال عن استخدام الدالة adjust_color()‎ مع [[CSS/color value|قيمة لونية]] بالنظام الست عشري، وأخرى باستخدام الدالة hsl()‎:
+
مثال عن استخدام الدالة <code>adjust_color()‎</code> مع [[CSS/color value|قيمة لونية]] بالنظام الست عشري، وأخرى باستخدام الدالة <code>hsl()</code>‎:
  
 
.<syntaxhighlight lang="sass">
 
.<syntaxhighlight lang="sass">
سطر 56: سطر 56:
  
 
== انظر أيضًا ==
 
== انظر أيضًا ==
* الدالة [[Sass/adjust hue|adjust_hue]]()‎: تغير قيمة الصبغة (hue).
+
* الدالة <code>[[Sass/adjust hue|adjust_hue()‎]]</code>: تغير قيمة الصبغة (hue).
* الدالة [[Sass/alpha|alpha]]()‎: تُعيد قيمة مكون الشفافية (alpha).
+
* الدالة <code>[[Sass/alpha|alpha()]]</code>‎: تُعيد قيمة مكون الشفافية (alpha).
  
 
== مصادر ==
 
== مصادر ==
 
* [https://sass-lang.com/documentation/Sass/Script/Functions.html#declare-class_method قسم الدالة adjust_color في صفحة الدوال في توثيق Sass الرسمي.]
 
* [https://sass-lang.com/documentation/Sass/Script/Functions.html#declare-class_method قسم الدالة adjust_color في صفحة الدوال في توثيق Sass الرسمي.]
 
[[تصنيف:Sass]]
 
[[تصنيف:Sass]]
[[تصنيف: adjust_color Sass]]
+
[[تصنيف: Sass Function]]

مراجعة 15:16، 17 أبريل 2018

تزيد الدالة adjust_color أو تقلل خاصية واحدة أو أكثر من خاصيات لونٍ. يمكنها أن تُغيّر شفافية وتشبّع وقيمة اللون الأحمر والأخضر والأزرق. تُحدّد الخاصيات على شكل وسائط مُسمّاة، وتُضاف أو تُنقص من القيمة الحالية لخاصية اللون تلك.

جميع الخاصيات اختيارية. كما لا يمكنك تحديد كلّ من خاصيات RGB‏ (‎$red و ‎$green و ‎$blue) وخاصيات HSL ‏(‎$hue و ‎$saturation و ‎$value) في نفس الوقت.

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

adjust_color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])

المعاملات

‎$color

اللون المراد تعديله.

‎$red

التعديل المُراد تطبيقه على المكون الأحمر، قيمتها بين ‎-255 و 255 مشمولة.

‎$green

التعديل المُراد تطبيقه على المكون الأخضر، قيمتها بين ‎-255 و 255 مشمولة.

‎$blue

التعديل المُراد تطبيقه على المكون الأزرق، قيمتها بين ‎-255 و 255 مشمولة.

‎$hue

التعديل المُراد تطبيقه على مكون الصبغة (hue)، قيمتها بالدرجات.

‎$saturation

التعديل المُراد تطبيقه على مكون الإشباع، قيمتها بين ‎-100% و 100% مشمولة.

‎$lightness

التعديل المُراد تطبيقه على مكون الإضاءة، قيمتها بين ‎-100% و 100% مشمولة.

‎$alpha

التعديل المُراد تطبيقه على مكون الشفافية، قيمتها بين ‎-1 و 1 مشمولة.

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

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

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

سيُرمى الخطأ ArgumentError إذا كان أيٌّ من المعاملات من النوع الخاطئ أو خارج المجال المقبول، أو إذا عُدّلت خاصيات RGB وخاصيات HSL في نفس الوقت.

أمثلة

مثال عن استخدام الدالة adjust_color()‎ مع قيمة لونية بالنظام الست عشري، وأخرى باستخدام الدالة hsl()‎:

.

selector {
  background-color: adjust-color(#102030, $red: -5, $blue: 5); // #0b2035
  color: adjust-color(hsl(25, 100%, 80%), $lightness: -30%, $alpha: -0.4); // hsla(25, 100%,   50%, 0.6)
}

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

.selector {
  background-color: #0b2035;
  color: hsla(25, 100%, 50%, 0.6);
}

انظر أيضًا

  • الدالة adjust_hue()‎: تغير قيمة الصبغة (hue).
  • الدالة alpha()‎: تُعيد قيمة مكون الشفافية (alpha).

مصادر