عرض مصدر Sass/scale color

<noinclude>{{DISPLAYTITLE: الدالة <code>scale_color()‎</code> في Sass}}</noinclude>
تعدِّل الدالة <code>()scale_color</code> مكوِّنًا واحدًا أو أكثر للون الممرَّر إليها بتدرج انسيابي (Fluidly scales). أي تغيِّر الدالة <code>()scale_color</code> قيمة مكوِّن اللون المحدَّد بناءً على مدى ارتفاع أو انخفاض القيمة الحاليَّة لذلك المكوِّن ضمن مجالها، وهذا مخالف لعمل الدالة <code>[[Sass/adjust color|adjust_color()‎]]</code> التي تستبدل بقيمة مكوَّن اللون الحاليَّة قيمةً ثابتةً معطاة. هذا يعني أنَّ زيادة قيمة السطوع للون ساطع بالفعل باستعمال الدالة <code>()scale_color</code> لن يزيد السطوع كثيرًا، ولكن سيزيد السطوع بشكل كبير إن كان اللون قاتمًا عند استعمال نفس القيمة السابقة مع الدالة. هذا الأمر مفيد جدًا لأننا سنحصل باستعمال الدالة <code>scale_color($color, ...)‎</code> على ثأثيرات متشابهة للون بغض النظر عن ماهيَّته.

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

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

جميع المكوِّنات اختياريَّة، ولا يمكنك تمرير قيم المكوِّنات RGB (أي ‎ <code>$red</code>و ‎<code>$green</code> و ‎<code>$blue</code>) مع قيم المكوِّنات HSL (أي <code>‎$saturation</code> و ‎<code>$lightness</code> و <code>‎$alpha</code>) لتغييرها في نفس الوقت.
== البنية العامة ==
<syntaxhighlight lang="sass">
scale_color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])‎
</syntaxhighlight>

== المعاملات ==

=== <code>‎$color</code> ===
اللون المراد تعديله.

=== <code>‎$red</code> ===
نسبة التغيير المُراد تطبيقه على قيمة المكوِّن الأحمر، ويجب أن تكون نسبة مئوية.

=== <code>‎$green</code> ===
نسبة التغيير المُراد تطبيقه على قيمة المكوِّن الأخضر، ويجب أن تكون نسبة مئوية.

=== <code>‎$blue</code> ===
نسبة التغيير المُراد تطبيقه على قيمة المكوِّن الأزرق، ويجب أن تكون نسبة مئوية.

=== <code>‎$saturation</code> ===
نسبة التغيير المُراد تطبيقه على قيمة مكوِّن الإِشباع، ويجب أن تكون نسبة مئوية.

=== <code>‎$lightness</code> ===
نسبة التغيير المُراد تطبيقه على قيمة مكوِّن السطوع، ويجب أن تكون نسبة مئوية.

=== <code>‎$alpha</code> ===
نسبة التغيير المُراد تطبيقه على قيمة مكوِّن قناة الشفافيَّة، ويجب أن تكون نسبة مئوية.

== القيم المعادة ==
يعاد اللون <code>‎$color</code> بعد تعديل قيم مكوناته.

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

== أمثلة ==
مثال عن استخدام الدالة <code>scale_color()‎</code>  لضبط قيمة اللون (<code>[[CSS/color|color]]</code>) بتغيير السطوع، ولون الخلفية (<code>[[CSS/background-color|background-color]]</code>) بتغيير الإشباع والشفافية:<syntaxhighlight lang="sass">
.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)
}

</syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css">
.selector {
  background-color: #d4f7d4;
  color: rgba(200, 205, 208, 0.7); }
</syntaxhighlight>

== انظر أيضًا ==
*الدالة <code>[[Sass/adjust color|adjust_color()‎]]</code>: تزيد أو تقلِّل قيمة مكوِّن واحد أو أكثر من مكوِّنات لون محدَّد.
*الدالة <code>[[Sass/adjust hue|adjust_hue()‎]]</code>: تغيِّر قيمة الصبغة (hue).
*الدالة <code>[[Sass/lighten|()lighten]]</code>: تجعل اللون أكثر سطوعًا.
*الدالة <code>[[Sass/darken|()darken]]</code> : تجعل اللون أكثر ظلمة.
* الدالة <code>[[Sass/opacify|()opacify]]</code> : تجعل اللون أكثر عتامةً.
* الدالة <code>[[Sass/saturate|saturate()]]</code>‎: تجعل اللون أكثر تشبّعًا.
* الدالة <code>[[Sass/desaturate|desaturate()]]</code>‎: تجعل اللون أقل تشبّعًا.
*الدالة <code>[[Sass/alpha|alpha()]]</code>‎: تعيد قيمة مكوِّن قناة الشفافيَّة (alpha).

== مصادر ==
* [https://sass-lang.com/documentation/Sass/Script/Functions.html#scale_color-instance_method قسم الدالة scale_color في صفحة الدوال في توثيق Sass الرسمي.]
[[تصنيف:Sass|{{SUBPAGENAME}}]]
[[تصنيف: Sass Function|{{SUBPAGENAME}}]]