الدالة scale_color()‎ في Sass

تعدِّل الدالة ()scale_color مكوِّنًا واحدًا أو أكثر للون الممرَّر إليها بتدرج انسيابي (Fluidly scales). أي تغيِّر الدالة ()scale_color قيمة مكوِّن اللون المحدَّد بناءً على مدى ارتفاع أو انخفاض القيمة الحاليَّة لذلك المكوِّن ضمن مجالها، وهذا مخالف لعمل الدالة adjust_color()‎ التي تستبدل بقيمة مكوَّن اللون الحاليَّة قيمةً ثابتةً معطاة. هذا يعني أنَّ زيادة قيمة السطوع للون ساطع بالفعل باستعمال الدالة ()scale_color لن يزيد السطوع كثيرًا، ولكن سيزيد السطوع بشكل كبير إن كان اللون قاتمًا عند استعمال نفس القيمة السابقة مع الدالة. هذا الأمر مفيد جدًا لأننا سنحصل باستعمال الدالة scale_color($color, ...)‎ على ثأثيرات متشابهة للون بغض النظر عن ماهيَّته.

لنأخذ مثلًا قيمة سطوع اللون التي تكون بين ‎0%‎ و ‎100%‎‎. إذا استدعيت الدالة بالشكل scale_color($color, $lightness: 40%)‎، فستزيد قيمة السطوع عن القيمة السابقة بنسبة ‎40% ولكن للمجال الذي يترواح بين القيمة السابقة و ‎100% (أي إذا كانت مثلًا قيمة السطوع 0%، فستصبح ‎40%. وإذا كانت ‎50% فستصبح ‎70% وهكذا). وإذا استدعيت الدالة بالشكل scale_color($color, $lightness: -40%)‎، فستنقص قيمة السطوع عن القيمة السابقة بنسبة ‎40% ولكن للمجال الذي يترواح بين القيمة السابقة و ‎0% (أي إذا كانت مثلًا قيمة السطوع ‎100%، فستصبح ‎60%‎. وإذا كانت ‎50%‎ فستصبح ‎30%‎‎ وهكذا).

يمكن استعمال هذه الدالة لتغيير قيم مكوِّنات اللون وهي الأحمر والأخضر والأزرق والتشبع والسطوع وقناة الشفافيَّة (alpha). تُحدَّد المكوِّنات على شكل وسائط مُسمّاة، ويجب أن تكون قيم جميع تلك الوسائط نسبًا مئوية أي تتراوح بين ‎0%‎ و ‎100%‎‎.

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

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

scale_color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])‎

المعاملات

‎$color

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

‎$red

نسبة التغيير المُراد تطبيقه على قيمة المكوِّن الأحمر، ويجب أن تكون نسبة مئوية.

‎$green

نسبة التغيير المُراد تطبيقه على قيمة المكوِّن الأخضر، ويجب أن تكون نسبة مئوية.

‎$blue

نسبة التغيير المُراد تطبيقه على قيمة المكوِّن الأزرق، ويجب أن تكون نسبة مئوية.

‎$saturation

نسبة التغيير المُراد تطبيقه على قيمة مكوِّن الإِشباع، ويجب أن تكون نسبة مئوية.

‎$lightness

نسبة التغيير المُراد تطبيقه على قيمة مكوِّن السطوع، ويجب أن تكون نسبة مئوية.

‎$alpha

نسبة التغيير المُراد تطبيقه على قيمة مكوِّن قناة الشفافيَّة، ويجب أن تكون نسبة مئوية.

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

يعاد اللون ‎$color بعد تعديل قيم مكوناته.

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

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

أمثلة

مثال عن استخدام الدالة scale_color()‎  لضبط قيمة اللون (color) بتغيير السطوع، ولون الخلفية (background-color) بتغيير الإشباع والشفافية:

.selector {
  background-color: scale-color(hsl(120, 70%, 80%), $lightness: 50%); // #d4f7d4
  color: scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%); // rgba(200, 205, 208, 0.7)
}

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

.selector {
  background-color: #d4f7d4;
  color: rgba(200, 205, 208, 0.7); }

انظر أيضًا

• الدالة adjust_color()‎: تزيد أو تقلِّل قيمة مكوِّن واحد أو أكثر من مكوِّنات لون محدَّد.
• الدالة adjust_hue()‎: تغيِّر قيمة الصبغة (hue).
• الدالة ()lighten: تجعل اللون أكثر سطوعًا.
• الدالة ()darken : تجعل اللون أكثر ظلمة.
• الدالة ()opacify : تجعل اللون أكثر عتامةً.
• الدالة saturate()‎: تجعل اللون أكثر تشبّعًا.
• الدالة desaturate()‎: تجعل اللون أقل تشبّعًا.
• الدالة alpha()‎: تعيد قيمة مكوِّن قناة الشفافيَّة (alpha).

مصادر

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