عرض مصدر Sass/scale color

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

على سبيل المثال ، إضاءة اللون تكون بين ‎<code>0%</code>‎ و ‎<code>100%‎‎</code>. إذا استدعيت <code>scale-color($color, $lightness: 40%)</code>‎، فإن إضاءة اللون الناتج ستكون بمسافة ‎40%‎ بين الإضاءة الأصلية للون والقيمة  <code>‎100%‎‎</code>. وإذا استدعيت <code>scale-color($color, $lightness: -40%)</code>‎، فإن إضاءة اللون الناتج ستكون بمسافة ‎40%‎ بين الإضاءة الأصلية للون والقيمة  <code>‎0%‎‎</code>.

يمكن أن يؤدي ذلك إلى تغيير خاصيات اللون الأحمر والأخضر والأزرق والتشبع والشفافية. تُحدّد الخاصيات على شكل وسائط مُسمّاة. ويجب أن تكون جميع الوسائط نسبًا مئوية بين ‎<code>0%</code>‎ و ‎<code>100%‎‎</code>.

جميع الخاصيات اختيارية. كما لا يمكنك تحديد خاصيات RGB (أي ‎ <code>$red</code>و ‎<code>$green</code> و ‎<code>$blue</code>) و خاصيات HSL (أي <code>‎$saturation</code> و ‎<code>$value</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>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 hue|adjust_hue()‎]]</code>: تغير قيمة الصبغة (hue).
* الدالة <code>[[Sass/adjust color|adjust_color()‎]]</code>: تغير قيمة اللون.
* الدالة <code>[[Sass/alpha|alpha()]]</code>‎: تُعيد قيمة مكون الشفافية (alpha).

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