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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE: الدالة <code>adjust_color‎()‎</code> في Sass}}</noinclude>
 
<noinclude>{{DISPLAYTITLE: الدالة <code>adjust_color‎()‎</code> في Sass}}</noinclude>
تزيد الدالة <code>adjust_color()‎</code> أو تقلِّل خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد. يمكنها أن تُغيّر شفافيَّة وتشبّع وقيمة اللون الأحمر والأخضر والأزرق. تُحدّد الخاصِّيَّات على شكل وسائط مُسمّاة لتُضاف أو تُنقص من القيمة الحاليَّة لخاصِّيَّة اللون تلك.
+
تزيد الدالة <code>adjust_color()‎</code> أو تقلِّل خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد. يمكنها أن تُغيّر شفافيَّة وتشبّع وقيمة اللون الأحمر والأخضر والأزرق. تُحدّد الخاصِّيَّات على شكل [[Sass/SassScript#.D8.A7.D9.84.D9.88.D8.B3.D8.A7.D8.A6.D8.B7 .D8.A7.D9.84.D9.85.D8.B3.D9.85.D9.91.D8.A7.D8.A9 .28Keyword Arguments.29|وسائط مُسمّاة]] لتُضاف أو تُنقص من القيمة الحاليَّة لخاصِّيَّة اللون تلك.
  
جميع الخاصِّيّات اختياريِّة. على أي حال، لا يمكنك تحديد كلّ من خاصِّيَّات RGB‏ (‎<code>$red</code> و ‎<code>$green</code> و ‎<code>$blue</code>) وخاصيات HSL ‏(‎<code>$hue</code> و <code>‎$saturation</code> و ‎<code>$value</code>) في نفس الوقت.
+
جميع الخاصِّيّات اختياريِّة. على أي حال، لا يمكنك تحديد كلّ من خاصِّيَّات RGB‏ (‎<code>$red</code> و ‎<code>$green</code> و ‎<code>$blue</code>) وخاصِّيَّات HSL ‏(‎<code>$hue</code> و <code>‎$saturation</code> و ‎<code>$lightness</code> و <code>‎$alpha</code>) في نفس الوقت.
  
 
== البنية العامة ==
 
== البنية العامة ==
سطر 30: سطر 30:
  
 
=== <code>‎$lightness</code> ===
 
=== <code>‎$lightness</code> ===
قيمة مكوِّن الإضاءة المراد تعديلها، وتترواح بين <code>‎-100%</code> و <code>100%</code> مشمولة.
+
قيمة مكوِّن السطوع المراد تعديلها، وتترواح بين <code>‎-100%</code> و <code>100%</code> مشمولة.
  
 
=== <code>‎$alpha</code> ===
 
=== <code>‎$alpha</code> ===
قيمة مكوِّن الشفافيَّة المراد تعديلها، وتترواح بين <code>‎-1</code> و <code>1</code> مشمولة.
+
قيمة مكوِّن قناة الشفافيَّة المراد تعديلها، وتترواح بين <code>‎-1</code> و <code>1</code> مشمولة.
  
 
== القيم المعادة ==
 
== القيم المعادة ==
سطر 54: سطر 54:
  
 
== انظر أيضًا ==
 
== انظر أيضًا ==
 +
* الدالة <code>[[Sass/scale color|()scale_color]]</code>: تعدِّل مكوِّنًا واحدًا أو أكثر للون الممرَّر إليها بتدرج انسيابي (Fluidly scales).
 
* الدالة <code>[[Sass/adjust hue|adjust_hue()‎]]</code>: تغيِّر قيمة الصبغة.
 
* الدالة <code>[[Sass/adjust hue|adjust_hue()‎]]</code>: تغيِّر قيمة الصبغة.
* الدالة <code>[[Sass/alpha|alpha()]]</code>‎: تُعيد قيمة مكون الشفافيَّة (alpha).
+
* الدالة <code>[[Sass/alpha|alpha()]]</code>‎: تُعيد قيمة مكون قناة الشفافيَّة (alpha).
* الدالة [[Sass/hsl|<code></code>]]<code>[[Sass/alpha|hsl()‎]]</code>‎: تُنشئ لونًا انطلاقًا من قيم الصبغة والتشبُّع والإضاءة.
+
* الدالة [[Sass/hsl|<code></code>]]<code>[[Sass/alpha|hsl()‎]]</code>‎: تُنشئ لونًا انطلاقًا من قيم الصبغة والتشبُّع والسطوع.
  
 
== مصادر ==
 
== مصادر ==

مراجعة 13:12، 13 مايو 2018

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

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

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

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 في نفس الوقت.

أمثلة

المثال 1: استخدام الدالة 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); // rgba(255, 106, 0, 0.6);
}

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

.selector {
  background-color: #0b2035;
  color: rgba(255, 106, 0, 0.6); }

انظر أيضًا

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

مصادر