الفرق بين المراجعتين ل"Sass/invert"
< Sass
اذهب إلى التنقل
اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE: الدالة <code>()invert</code> في Sass}}</noinclude> تجعل الدالة <code>()invert</code> اللون بالأبيض والأسو...') |
ط (استبدال النص - 'توثيق Sass الرسمي.]' ب'توثيق Sass الرسمي].') |
||
(6 مراجعات متوسطة بواسطة 3 مستخدمين غير معروضة) | |||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: الدالة <code>()invert</code> في Sass}}</noinclude> | <noinclude>{{DISPLAYTITLE: الدالة <code>()invert</code> في Sass}}</noinclude> | ||
− | + | تعيد الدالة <code>()invert</code> عكس اللون الممرَّر إليها. أي تعكس قيم المركبات الحمراء والخضراء والزرقاء للون الممرَّر إليها دون المساس بقيمة الشفافيَّة (opacity). | |
== البنية العامة == | == البنية العامة == | ||
<syntaxhighlight lang="sass"> | <syntaxhighlight lang="sass"> | ||
invert($color) | invert($color) | ||
+ | invert($color, $weight: 100%) | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | |||
== المعاملات == | == المعاملات == | ||
+ | === <code>$color</code> === | ||
+ | اللون المراد الحصول على معاكسه. | ||
− | === <code>$ | + | === <code>$weight</code> === |
− | + | الوزن النسبي للون المعكوس. | |
== القيم المعادة == | == القيم المعادة == | ||
− | اللون | + | تُعاد قيمة اللون المعاكس للون <code>$color</code>. |
== الأخطاء والاستثناءات == | == الأخطاء والاستثناءات == | ||
− | سيُرمى الخطأ <code>ArgumentError</code> إن لم يكن <code>$color</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> | ||
== انظر أيضًا == | == انظر أيضًا == | ||
* الدالة <code>[[Sass/desaturate|desaturate()]]</code>: تجعل اللون أقل تشبّعًا. | * الدالة <code>[[Sass/desaturate|desaturate()]]</code>: تجعل اللون أقل تشبّعًا. | ||
+ | * الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code>: تعدّل صبغة اللون. | ||
== مصادر == | == مصادر == | ||
− | * [https://sass-lang.com/documentation/Sass/Script/Functions.html# | + | * [https://sass-lang.com/documentation/Sass/Script/Functions.html#invert-instance_method قسم الدالة invert في صفحة الدوال في توثيق Sass الرسمي]. |
− | [[تصنيف:Sass]] | + | [[تصنيف:Sass|{{SUBPAGENAME}}]] |
− | [[تصنيف: Sass Function]] | + | [[تصنيف: Sass Function|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 07:00، 20 مايو 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()
: تعدّل صبغة اللون.