الدالة ()invert في Sass

من موسوعة حسوب

تعيد الدالة ()invert عكس اللون الممرَّر إليها. أي تعكس قيم المركبات الحمراء والخضراء والزرقاء للون الممرَّر إليها دون المساس بقيمة الشفافيَّة (opacity).

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

invert($color)
invert($color, $weight: 100%)

المعاملات

‎$color

اللون المراد الحصول على معاكسه.

‎$weight

الوزن النسبي للون المعكوس.

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

تُعاد قيمة اللون المعاكس للون ‎$color.

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

سيُرمى الخطأ ArgumentError إن لم يكن ‎$color لونًا أو لم يكن ‎$weight نسبة مئوية.

أمثلة

مثال عن استخدام الدالة ()invert لعكس لون النص color ولون الخلفية background-color مع استخدام للوزن النسبي ‎$weight:

.original {
  color: white;
  background-color: orange;
}

.inverted {
  color: invert(white); // black
  background-color: invert(orange, 30%); // #b38f4d
}

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

.original {
  color: white;
  background-color: orange; }

.inverted {
  color: black;
  background-color: #b38f4d; }

انظر أيضًا

  • الدالة desaturate()‎: تجعل اللون أقل تشبّعًا.
  • الدالة adjust_hue()‎: تعدّل صبغة اللون.

مصادر