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

مراجعة 14:00، 7 مايو 2018

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

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

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

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()‎: تغير قيمة اللون.
الدالة adjust_hue()‎: تعدِّل قيمة الصبغة (hue).
الدالة adjust_color()‎: تعدِّل قيمة اللون.

مصادر

قسم الدالة change_color في صفحة الدوال في توثيق Sass الرسمي.

@@ سطر 58: / سطر 58: @@
 == مصادر ==
-* [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 Function]]