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

من موسوعة حسوب
مراجعة 07:00، 20 مايو 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات) (استبدال النص - 'توثيق Sass الرسمي.]' ب'توثيق 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()‎: تعدّل صبغة اللون.

مصادر