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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
 
(6 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE: الدالة <code>change_color()‎</code> في Sass}}</noinclude>
 
<noinclude>{{DISPLAYTITLE: الدالة <code>change_color()‎</code> في Sass}}</noinclude>
−
تغيّر الدالة <code>()change_color</code> خاصيات اللون: الأحمر والأخضر والأزرق والتشبع (saturation) والصبغة (hue) والشفافية. تُحدَّد الخاصيات على شكل وسائط مُسمّاة. وتُعوَِّض القيم الحالية لتلك الخاصيات في اللون.
+
تغيّر الدالة <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>‎$saturation</code> و ‎<code>$value</code>) في نفس الوقت.
 
  
 +
جميع الخاصِّيَّات اختياريَّة. مع ذلك، لا يمكنك تغيير خاصِّيَّات 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">
 
<syntaxhighlight lang="sass">
سطر 15: سطر 14:
  
 
=== <code>‎$red</code> ===
 
=== <code>‎$red</code> ===
−
التعديل المُراد تطبيقه على المكون الأحمر، قيمتها بين <code>‎0</code> و <code>255</code> مشمولة.
+
قيمة المكوِّن الأحمر الجديدة، وتتراوح بين 0 و 255 مشمولة.
  
 
=== <code>‎$green</code> ===
 
=== <code>‎$green</code> ===
−
التعديل المُراد تطبيقه على المكون الأخضر، قيمتها بين <code>‎0</code> و <code>255</code> مشمولة.
+
قيمة المكوِّن الأخضر الجديدة، وتتراوح بين 0 و 255 مشمولة.
  
 
=== <code>‎$blue</code> ===
 
=== <code>‎$blue</code> ===
−
التعديل المُراد تطبيقه على المكون الأزرق، قيمتها بين <code>‎0</code> و <code>255</code> مشمولة.
+
قيمة المكوِّن الأزرق الجديدة، وتتراوح بين 0 و 255 مشمولة.
  
 
=== <code>‎$hue</code> ===
 
=== <code>‎$hue</code> ===
−
التعديل المُراد تطبيقه على الصبغة، وحدتها ‎deg.
+
قيمة مكوِّن الصبغة الجديدة، وواحدتها الدرجات (‎(deg.
  
 
=== <code>‎$saturation</code> ===
 
=== <code>‎$saturation</code> ===
−
التعديل المُراد تطبيقه على مكون الإشباع، قيمتها بين <code>‎0%</code> و ‎<code>100%</code> مشمولة.
+
قيمة مكوِّن الإشباع الجديدة، وتتراوح بين ‎0% و ‎100%.
  
 
=== <code>‎$lightness</code> ===
 
=== <code>‎$lightness</code> ===
−
التعديل المُراد تطبيقه على مكون الإضاءة، قيمتها بين <code>‎0%</code> و ‎<code>100%</code> مشمولة.
+
قيمة مكوِّن السطوع الجديدة، وتتراوح بين ‎0% و ‎100%.
  
 
=== <code>‎$alpha</code> ===
 
=== <code>‎$alpha</code> ===
−
التعديل المُراد تطبيقه على مكون الشفافية، قيمتها بين <code>‎0</code> و <code>1</code> مشمولة.
+
قيمة مكوِّن قناة الشفافيَّة الجديدة، وتتراوح بين 0 و 1.
  
 
== القيم المعادة ==
 
== القيم المعادة ==
−
قيمة لونية بعد التعديل.
+
يُعاد اللون <code>‎$color</code> بعد تغيير قيم مكوناته.
  
 
== الأخطاء والاستثناءات ==
 
== الأخطاء والاستثناءات ==
−
سيُرمى الخطأ <code>ArgumentError</code> إذا كان أيٌّ من المعاملات من النوع الخاطئ أو خارج المجال المقبول، أو إذا عُدّلت خاصيات RGB وخاصيات HSL في نفس الوقت.
+
سيُرمى الخطأ <code>ArgumentError</code> إذا كان أيٌّ من المعاملات من النوع الخطأ، أو خارج المجال المقبول، أو إذا عُدّلت خاصِّيَّات RGB وخاصِّيَّات HSL في نفس الوقت.
  
 
== أمثلة ==
 
== أمثلة ==
−
مثال عن استخدام الدالة <code>'''change_color'''()‎</code>  لضبط قيمة اللون ([[CSS/color|color]]) ولون الخلفية ([[CSS/background-color|background-color]]):<syntaxhighlight lang="sass">
+
مثال عن استخدام الدالة <code>change_color()‎</code> لضبط قيمة اللون (<code>[[CSS/color|color]]</code>) ولون الخلفية (<code>[[CSS/background-color|background-color]]</code>):<syntaxhighlight lang="sass">
−
selector {
+
.selector {
−
  background-color: ‎change-color(#102030, $blue: 5) // #102005
+
  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)
+
  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: hsla(25, 100%, 40%, 0.8);
 
 
}
 
}
 +
</syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة CSS الآتية:<syntaxhighlight lang="css">
 +
.selector {
 +
  background-color: #102005;
 +
  color: rgba(204, 85, 0, 0.8); }
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 
== انظر أيضًا ==
 
== انظر أيضًا ==
−
* الدالة <code>[[Sass/scale color|'''scale_color'''()‎]]</code>: تغير قيمة الصبغة (hue).
+
* الدالة <code>[[Sass/scale color|()scale_color]]</code>: تعدِّل مكوِّنًا واحدًا أو أكثر للون الممرَّر إليها بتدرج انسيابي (Fluidly scales).
−
 
+
* الدالة <code>[[Sass/adjust hue|adjust_hue()‎]]</code>: تعدِّل قيمة الصبغة (hue).
−
* الدالة <code>[[Sass/adjust hue|adjust_hue()‎]]</code>: تغير قيمة الصبغة (hue).
+
* الدالة <code>[[Sass/adjust color|adjust_color()‎]]</code>: تعدِّل قيمة اللون.
−
* الدالة <code>[[Sass/adjust color|adjust_color()‎]]</code>: تغير قيمة الصبغة (hue).
 
  
 
== مصادر ==
 
== مصادر ==
−
* [https://sass-lang.com/documentation/Sass/Script/Functions.html#change_color-instance_method قسم الدالة adjust_color في صفحة الدوال في توثيق Sass الرسمي.]
+
* [https://sass-lang.com/documentation/Sass/Script/Functions.html#change_color-instance_method قسم الدالة change_color في صفحة الدوال في توثيق Sass الرسمي].
−
[[تصنيف:Sass]]
+
[[تصنيف:Sass|{{SUBPAGENAME}}]]
−
[[تصنيف: Sass Function]]
+
[[تصنيف: Sass Function|{{SUBPAGENAME}}]]

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

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

جميع الخاصِّيَّات اختياريَّة. مع ذلك، لا يمكنك تغيير خاصِّيَّات RGB (أي الخاصِّيَّة ‎ $redو ‎$green و ‎$blue) و خاصّيَّات HSL (أي الخاصِّيَّة ‎$hue و ‎$saturation و ‎$lightness و ‎$alpha) في نفس الوقت.

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

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.

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

يُعاد اللون ‎$color بعد تغيير قيم مكوناته.

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

سيُرمى الخطأ 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); // rgba(204, 85, 0, 0.8)
}

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

.selector {
  background-color: #102005;
  color: rgba(204, 85, 0, 0.8); }

انظر أيضًا

  • الدالة ()scale_color: تعدِّل مكوِّنًا واحدًا أو أكثر للون الممرَّر إليها بتدرج انسيابي (Fluidly scales).
  • الدالة adjust_hue()‎: تعدِّل قيمة الصبغة (hue).
  • الدالة adjust_color()‎: تعدِّل قيمة اللون.

مصادر

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