الفرق بين المراجعتين لصفحة: «Sass/scale color»

من موسوعة حسوب
→ التعديل السابق
مرئينص الويكي
لا ملخص تعديل
ط استبدال النص - 'توثيق Sass الرسمي.]' ب'توثيق Sass الرسمي].'
 
(5 مراجعات متوسطة بواسطة 3 مستخدمين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE: الدالة <code>scale_color()‎</code> في Sass}}</noinclude>
<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>()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> على ثأثيرات متشابهة للون بغض النظر عن ماهيَّته.


على سبيل المثال ، إضاءة اللون تكون بين ‎<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>.
لنأخذ مثلًا قيمة سطوع اللون التي تكون بين ‎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%‎‎ وهكذا).


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


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


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


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


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


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


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


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


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


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


== أمثلة ==
== أمثلة ==
مثال عن استخدام الدالة <code>'''scale_color'''()‎</code>  لضبط قيمة اللون ([[CSS/color|color]]) ولون الخلفية ([[CSS/background-color|background-color]]):<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: ‎scale-color(hsl(120, 70%, 80%), $lightness: 50%) // hsl(120, 70%, 90%)
  background-color: scale-color(hsl(120, 70%, 80%), $lightness: 50%); // #d4f7d4
  color: scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) // hsla(200, 7%, 80%, 0.7)
  color: scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%); // rgba(200, 205, 208, 0.7)
}
}


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


== انظر أيضًا ==
== انظر أيضًا ==
* الدالة <code>[[Sass/adjust hue|adjust_hue()‎]]</code>: تغير قيمة الصبغة (hue).
*الدالة <code>[[Sass/adjust color|adjust_color()‎]]</code>: تزيد أو تقلِّل قيمة مكوِّن واحد أو أكثر من مكوِّنات لون محدَّد.
* الدالة <code>[[Sass/adjust color|adjust_color()‎]]</code>: تغير قيمة الصبغة (hue).
*الدالة <code>[[Sass/adjust hue|adjust_hue()‎]]</code>: تغيِّر قيمة الصبغة (hue).
* الدالة <code>[[Sass/alpha|alpha()]]</code>‎: تُعيد قيمة مكون الشفافية (alpha).
*الدالة <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 قسم الدالة 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}}]]

المراجعة الحالية بتاريخ 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).

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=Sass/scale_color&oldid=8818»