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

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

مصادر

قسم الدالة invert في صفحة الدوال في توثيق Sass الرسمي.

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