الدالة change_color()‎ في Sass

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث

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

مصادر