عرض مصدر Sass/change color

<noinclude>{{DISPLAYTITLE: الدالة <code>change_color()‎</code> في Sass}}</noinclude>
تغيّر الدالة <code>()change_color</code> خاصِّيَّة واحدة أو أكثر من خاصِّيَّات اللون المعطى وهي: الأحمر والأخضر والأزرق والتشبُّع (saturation) والصبغة (hue) والشفافيَّة. تُحدَّد الخاصِّيَّات على شكل [[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>$lightness</code> و <code>‎$alpha</code>) في نفس الوقت.
== البنية العامة ==
<syntaxhighlight lang="sass">
scale_color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])‎
</syntaxhighlight>

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

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

=== <code>‎$red</code> ===
قيمة المكوِّن الأحمر الجديدة، وتتراوح بين 0 و 255 مشمولة.

=== <code>‎$green</code> ===
قيمة المكوِّن الأخضر الجديدة، وتتراوح بين 0 و 255 مشمولة.

=== <code>‎$blue</code> ===
قيمة المكوِّن الأزرق الجديدة، وتتراوح بين 0 و 255 مشمولة.

=== <code>‎$hue</code> ===
قيمة مكوِّن الصبغة الجديدة، وواحدتها الدرجات (‎(deg.

=== <code>‎$saturation</code> ===
قيمة مكوِّن الإشباع الجديدة، وتتراوح بين ‎0% و ‎100%.

=== <code>‎$lightness</code> ===
قيمة مكوِّن السطوع الجديدة، وتتراوح بين ‎0% و ‎100%.

=== <code>‎$alpha</code> ===
قيمة مكوِّن قناة الشفافيَّة الجديدة، وتتراوح بين  0 و 1.

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

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

== أمثلة ==
مثال عن استخدام الدالة <code>change_color()‎</code> لضبط قيمة اللون (<code>[[CSS/color|color]]</code>) ولون الخلفية (<code>[[CSS/background-color|background-color]]</code>):<syntaxhighlight lang="sass">
.selector {
  background-color: change-color(#102030, $blue: 5); // #102005
  color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: 0.8); // rgba(204, 85, 0, 0.8)
}
</syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة CSS الآتية:<syntaxhighlight lang="css">
.selector {
  background-color: #102005;
  color: rgba(204, 85, 0, 0.8); }
</syntaxhighlight>

== انظر أيضًا ==
* الدالة <code>[[Sass/scale color|()scale_color]]</code>: تعدِّل مكوِّنًا واحدًا أو أكثر للون الممرَّر إليها بتدرج انسيابي (Fluidly scales).
* الدالة <code>[[Sass/adjust hue|adjust_hue()‎]]</code>: تعدِّل قيمة الصبغة (hue).
* الدالة <code>[[Sass/adjust color|adjust_color()‎]]</code>: تعدِّل قيمة اللون.

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