الفرق بين المراجعتين لصفحة: «Sass/invert»
< Sass
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
لا ملخص تعديل |
||
سطر 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()
: تعدّل صبغة اللون.