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

المراجعة الحالية بتاريخ 07:01، 20 مايو 2018

تعدِّل الدالة ()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 الرسمي.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE: الدالة <code>scale_color()‎</code> في Sass}}</noinclude>
-تزيد الدالة <code>scale_color</code> أو تقلل خاصية واحدة أو أكثر من خاصيات لونٍ. يمكنها أن تُغيّر شفافية وتشبّع وقيمة اللون الأحمر والأخضر والأزرق. تُحدّد الخاصيات على شكل وسائط مُسمّاة، وتُضاف أو تُنقص من القيمة الحالية لخاصية اللون تلك.
+تعدِّل الدالة <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> على ثأثيرات متشابهة للون بغض النظر عن ماهيَّته.
-جميع الخاصيات اختيارية. كما لا يمكنك تحديد كلّ من خاصيات RGB‏ (‎<code>$red</code> و ‎<code>$green</code> و ‎<code>$blue</code>) وخاصيات HSL ‏(‎<code>$hue</code> و <code>‎$saturation</code> و ‎<code>$value</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], [$hue], [$saturation], [$lightness], [$alpha])‎
+scale_color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])‎
 </syntaxhighlight>
@@ سطر 15: / سطر 18: @@
 === <code>‎$red</code> ===
-التعديل المُراد تطبيقه على المكون الأحمر، قيمتها بين <code>‎-255</code> و <code>255</code> مشمولة.
+نسبة التغيير المُراد تطبيقه على قيمة المكوِّن الأحمر، ويجب أن تكون نسبة مئوية.
 === <code>‎$green</code> ===
-التعديل المُراد تطبيقه على المكون الأخضر، قيمتها بين <code>‎-255</code> و <code>255</code> مشمولة.
+نسبة التغيير المُراد تطبيقه على قيمة المكوِّن الأخضر، ويجب أن تكون نسبة مئوية.
 === <code>‎$blue</code> ===
-التعديل المُراد تطبيقه على المكون الأزرق، قيمتها بين <code>‎-255</code> و <code>255</code> مشمولة.
+نسبة التغيير المُراد تطبيقه على قيمة المكوِّن الأزرق، ويجب أن تكون نسبة مئوية.
-=== <code>‎$hue</code> ===
-التعديل المُراد تطبيقه على مكون الصبغة (hue)، قيمتها بالدرجات.
 === <code>‎$saturation</code> ===
-التعديل المُراد تطبيقه على مكون الإشباع، قيمتها بين <code>‎-100%</code> و <code>100%</code> مشمولة.
+نسبة التغيير المُراد تطبيقه على قيمة مكوِّن الإِشباع، ويجب أن تكون نسبة مئوية.
 === <code>‎$lightness</code> ===
-التعديل المُراد تطبيقه على مكون الإضاءة، قيمتها بين <code>‎-100%</code> و <code>100%</code> مشمولة.
+نسبة التغيير المُراد تطبيقه على قيمة مكوِّن السطوع، ويجب أن تكون نسبة مئوية.
 === <code>‎$alpha</code> ===
-التعديل المُراد تطبيقه على مكون الشفافية، قيمتها بين <code>‎-1</code> و <code>1</code> مشمولة.
+نسبة التغيير المُراد تطبيقه على قيمة مكوِّن قناة الشفافيَّة، ويجب أن تكون نسبة مئوية.
 == القيم المعادة ==
-قيمة لونية بعد التعديل.
+يعاد اللون <code>‎$color</code> بعد تعديل قيم مكوناته.
 == الأخطاء والاستثناءات ==
-سيُرمى الخطأ <code>ArgumentError</code> إذا كان أيٌّ من المعاملات من النوع الخاطئ أو خارج المجال المقبول، أو إذا عُدّلت خاصيات RGB وخاصيات HSL في نفس الوقت.
+سيُرمى الخطأ <code>ArgumentError</code> إذا كان أيٌّ من المعاملات من النوع الخطأ، أو خارج المجال المسموح، أو إذا عُدّلت المكوِّنات RGB والمكوِّنات HSL في نفس الوقت.
 == أمثلة ==
-مثال عن استخدام الدالة <code>adjust_color()‎</code> مع [[CSS/color value|قيمة لونية]] بالنظام الست عشري، وأخرى باستخدام الدالة <code>hsl()</code>‎:<syntaxhighlight lang="sass">
+مثال عن استخدام الدالة <code>scale_color()‎</code>  لضبط قيمة اللون (<code>[[CSS/color|color]]</code>) بتغيير السطوع، ولون الخلفية (<code>[[CSS/background-color|background-color]]</code>) بتغيير الإشباع والشفافية:<syntaxhighlight lang="sass">
-selector {
+.selector {
-  background-color: adjust-color(#102030, $red: -5, $blue: 5); // #0b2035
+  background-color: scale-color(hsl(120, 70%, 80%), $lightness: 50%); // #d4f7d4
-  color: adjust-color(hsl(25, 100%, 80%), $lightness: -30%, $alpha: -0.4); // hsla(25, 100%,   50%, 0.6)
+  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: #0b2035;
+  background-color: #d4f7d4;
-  color: hsla(25, 100%, 50%, 0.6);
+  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).
+*الدالة <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#declare-class_method قسم الدالة adjust_color في صفحة الدوال في توثيق Sass الرسمي.]
+* [https://sass-lang.com/documentation/Sass/Script/Functions.html#scale_color-instance_method قسم الدالة scale_color في صفحة الدوال في توثيق Sass الرسمي].
-[[تصنيف:Sass]]
+[[تصنيف:Sass|{{SUBPAGENAME}}]]
-[[تصنيف: Sass Function]]
+[[تصنيف: Sass Function|{{SUBPAGENAME}}]]