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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE: الدالة <code>change_color()‎</code> في Sass}}</noinclude> تقوم الدالة <code>()change_color</code> بالتعديل الس...')
 
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE: الدالة <code>change_color()‎</code> في Sass}}</noinclude>
 
<noinclude>{{DISPLAYTITLE: الدالة <code>change_color()‎</code> في Sass}}</noinclude>
−
تقوم الدالة <code>()change_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>()change_color</code> خاصيات اللون: الأحمر والأخضر والأزرق والتشبع (saturation) والصبغة (hue) والشفافية. تُحدَّد الخاصيات على شكل وسائط مُسمّاة. وتُعوَِّض القيم الحالية لتلك الخاصيات في اللون.
−
 
 
−
على سبيل المثال ، إضاءة اللون تكون بين ‎<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>) في نفس الوقت.
 
جميع الخاصيات اختيارية. كما لا يمكنك تحديد خاصيات RGB (أي ‎ <code>$red</code>و ‎<code>$green</code> و ‎<code>$blue</code>) و خاصيات HSL (أي <code>‎$saturation</code> و ‎<code>$value</code>) في نفس الوقت.
سطر 10: سطر 6:
 
== البنية العامة ==
 
== البنية العامة ==
 
<syntaxhighlight lang="sass">
 
<syntaxhighlight lang="sass">
−
scale_color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])‎
+
scale_color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])‎
 
</syntaxhighlight>
 
</syntaxhighlight>
  
سطر 19: سطر 15:
  
 
=== <code>‎$red</code> ===
 
=== <code>‎$red</code> ===
−
التعديل المُراد تطبيقه على المكون الأحمر، قيمتها بين <code>‎-255</code> و <code>255</code> مشمولة.
+
التعديل المُراد تطبيقه على المكون الأحمر، قيمتها بين <code>‎0</code> و <code>255</code> مشمولة.
  
 
=== <code>‎$green</code> ===
 
=== <code>‎$green</code> ===
−
التعديل المُراد تطبيقه على المكون الأخضر، قيمتها بين <code>‎-255</code> و <code>255</code> مشمولة.
+
التعديل المُراد تطبيقه على المكون الأخضر، قيمتها بين <code>‎0</code> و <code>255</code> مشمولة.
  
 
=== <code>‎$blue</code> ===
 
=== <code>‎$blue</code> ===
−
التعديل المُراد تطبيقه على المكون الأزرق، قيمتها بين <code>‎-255</code> و <code>255</code> مشمولة.
+
التعديل المُراد تطبيقه على المكون الأزرق، قيمتها بين <code>‎0</code> و <code>255</code> مشمولة.
 +
 
 +
=== <code>‎$hue</code> ===
 +
التعديل المُراد تطبيقه على الصبغة، وحدتها ‎deg.
  
 
=== <code>‎$saturation</code> ===
 
=== <code>‎$saturation</code> ===
−
التعديل المُراد تطبيقه على مكون الإشباع، قيمتها بين <code>‎-100%</code> و <code>100%</code> مشمولة.
+
التعديل المُراد تطبيقه على مكون الإشباع، قيمتها بين <code>‎0%</code> و ‎<code>100%</code> مشمولة.
  
 
=== <code>‎$lightness</code> ===
 
=== <code>‎$lightness</code> ===
−
التعديل المُراد تطبيقه على مكون الإضاءة، قيمتها بين <code>‎-100%</code> و <code>100%</code> مشمولة.
+
التعديل المُراد تطبيقه على مكون الإضاءة، قيمتها بين <code>‎0%</code> و ‎<code>100%</code> مشمولة.
  
 
=== <code>‎$alpha</code> ===
 
=== <code>‎$alpha</code> ===
−
التعديل المُراد تطبيقه على مكون الشفافية، قيمتها بين <code>‎-1</code> و <code>1</code> مشمولة.
+
التعديل المُراد تطبيقه على مكون الشفافية، قيمتها بين <code>‎0</code> و <code>1</code> مشمولة.
  
 
== القيم المعادة ==
 
== القيم المعادة ==
سطر 43: سطر 42:
  
 
== أمثلة ==
 
== أمثلة ==
−
مثال عن استخدام الدالة <code>'''scale_color'''()‎</code>  لضبط قيمة اللون ([[CSS/color|color]]) ولون الخلفية ([[CSS/background-color|background-color]]):<syntaxhighlight lang="sass">
+
مثال عن استخدام الدالة <code>'''change_color'''()‎</code>  لضبط قيمة اللون ([[CSS/color|color]]) ولون الخلفية ([[CSS/background-color|background-color]]):<syntaxhighlight lang="sass">
 
selector {
 
selector {
−
  background-color: ‎scale-color(hsl(120, 70%, 80%), $lightness: 50%) // hsl(120, 70%, 90%)
+
  background-color: ‎change-color(#102030, $blue: 5) // #102005
−
  color: scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) // hsla(200, 7%, 80%, 0.7)
+
  color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: 0.8) // hsla(25, 100%, 40%, 0.8)
 
}
 
}
  
 
</syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css">
 
</syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css">
 
selector {
 
selector {
−
  background-color: hsl(120, 70%, 90%);
+
  background-color: #102005;
−
  color: hsla(200, 7%, 80%, 0.7);
+
  color: hsla(25, 100%, 40%, 0.8);
 
}
 
}
−
 
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 
== انظر أيضًا ==
 
== انظر أيضًا ==
 +
* الدالة <code>[[Sass/scale color|'''scale_color'''()‎]]</code>: تغير قيمة الصبغة (hue).
 +
 
* الدالة <code>[[Sass/adjust hue|adjust_hue()‎]]</code>: تغير قيمة الصبغة (hue).
 
* الدالة <code>[[Sass/adjust hue|adjust_hue()‎]]</code>: تغير قيمة الصبغة (hue).
 
* الدالة <code>[[Sass/adjust color|adjust_color()‎]]</code>: تغير قيمة الصبغة (hue).
 
* الدالة <code>[[Sass/adjust color|adjust_color()‎]]</code>: تغير قيمة الصبغة (hue).
−
* الدالة <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#change_color-instance_method قسم الدالة adjust_color في صفحة الدوال في توثيق Sass الرسمي.]
 
[[تصنيف:Sass]]
 
[[تصنيف:Sass]]
 
[[تصنيف: Sass Function]]
 
[[تصنيف: Sass Function]]

مراجعة 18:41، 19 أبريل 2018

تغيّر الدالة ()change_color خاصيات اللون: الأحمر والأخضر والأزرق والتشبع (saturation) والصبغة (hue) والشفافية. تُحدَّد الخاصيات على شكل وسائط مُسمّاة. وتُعوَِّض القيم الحالية لتلك الخاصيات في اللون.

جميع الخاصيات اختيارية. كما لا يمكنك تحديد خاصيات RGB (أي ‎ $redو ‎$green و ‎$blue) و خاصيات HSL (أي ‎$saturation و ‎$value) في نفس الوقت.

البنية العامة

scale_color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])‎

المعاملات

‎$color

اللون المراد تعديله.

‎$red

التعديل المُراد تطبيقه على المكون الأحمر، قيمتها بين ‎0 و 255 مشمولة.

‎$green

التعديل المُراد تطبيقه على المكون الأخضر، قيمتها بين ‎0 و 255 مشمولة.

‎$blue

التعديل المُراد تطبيقه على المكون الأزرق، قيمتها بين ‎0 و 255 مشمولة.

‎$hue

التعديل المُراد تطبيقه على الصبغة، وحدتها ‎deg.

‎$saturation

التعديل المُراد تطبيقه على مكون الإشباع، قيمتها بين ‎0% و ‎100% مشمولة.

‎$lightness

التعديل المُراد تطبيقه على مكون الإضاءة، قيمتها بين ‎0% و ‎100% مشمولة.

‎$alpha

التعديل المُراد تطبيقه على مكون الشفافية، قيمتها بين ‎0 و 1 مشمولة.

القيم المعادة

قيمة لونية بعد التعديل.

الأخطاء والاستثناءات

سيُرمى الخطأ ArgumentError إذا كان أيٌّ من المعاملات من النوع الخاطئ أو خارج المجال المقبول، أو إذا عُدّلت خاصيات RGB وخاصيات HSL في نفس الوقت.

أمثلة

مثال عن استخدام الدالة change_color()‎  لضبط قيمة اللون (color) ولون الخلفية (background-color):

selector {
  background-color: ‎change-color(#102030, $blue: 5) // #102005
  color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: 0.8) // hsla(25, 100%, 40%, 0.8)
}

سيُصرّف المثال السابق إلى شيفرة CSS الآتية:

selector {
  background-color: #102005;
  color: hsla(25, 100%, 40%, 0.8);
}

انظر أيضًا

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=Sass/change_color&oldid=6699"