الفرق بين المراجعتين لصفحة: «Sass/invert»

من موسوعة حسوب
طلا ملخص تعديل
لا ملخص تعديل
سطر 18: سطر 18:
== الأخطاء والاستثناءات ==
== الأخطاء والاستثناءات ==
سيُرمى الخطأ <code>ArgumentError</code> إن لم يكن <code>‎$color</code> لونًا أو لم يكن <code>‎$weight</code> نسبة مئوية.
سيُرمى الخطأ <code>ArgumentError</code> إن لم يكن <code>‎$color</code> لونًا أو لم يكن <code>‎$weight</code> نسبة مئوية.
== أمثلة ==
مثال عن استخدام الدالة <code>()invert</code> لعكس لون النص <code>[[CSS/color|color]]</code> ولون الخلفية <code>[[CSS/background-color|background-color]]</code> مع استخدام للوزن النسبي ‎<code>$weight</code>:<syntaxhighlight lang="sass">
.original {
  color: white;
  background-color: orange;
}
.inverted {
  color: invert(white); // black
  background-color: invert(orange, 30%); // #b38f4d
}
</syntaxhighlight>ستُصرَّف الشيفرة السابقة إلى شيفرة CSS الآتية:<syntaxhighlight lang="css">
.original {
  color: white;
  background-color: orange; }
.inverted {
  color: black;
  background-color: #b38f4d; }
</syntaxhighlight>


== انظر أيضًا ==
== انظر أيضًا ==

مراجعة 13:30، 12 مايو 2018

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

مصادر