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

من موسوعة حسوب
لا ملخص تعديل
ط استبدال النص - 'توثيق Sass الرسمي.]' ب'توثيق Sass الرسمي].'
 
(5 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE: الدالة <code>()‎if</code> في Sass}}</noinclude>
<noinclude>{{DISPLAYTITLE: الدالة <code>()‎if</code> في Sass}}</noinclude>
تعيد الدالة <code>()if</code> قيمة واحدةً من بين قيمتين، اعتمادًا على ما إذا كان <code>‎$condition</code> صحيحًا أم لا. تمامًا مثل <code>‎@if</code>، تُعدّ جميع القيم صحيحةً باستثناء <code>false</code> و <code>null</code>.
تعيد الدالة <code>()if</code> إحدى القيمتين الممرَّرتين إليها اعتمادًا على تحقُّق شرط معين. تشبه تمامًا التعليمة <code>[[Sass/control directives|‎@if]]</code>، إذ تُعدّ جميع القيم صحيحةً باستثناء القيمة <code>false</code> والقيمة <code>null</code>.


== البنية العامة ==
== البنية العامة ==
سطر 10: سطر 10:


=== <code>‎$condition</code> ===
=== <code>‎$condition</code> ===
شرط يحدد صحة <code>‎$if-true</code> أو <code>‎$if-false</code>.
الشرط المراد التحقق من صحته.


=== <code>‎$if-true</code> ===
=== <code>‎$if-true</code> ===
القيمة التي ستُعاد إن كان <code>‎$condition</code> '''صحيحًا.'''   
القيمة التي ستُعاد إن كان الشرط <code>‎$condition</code> محقَّقًا'''.'''   


=== <code>‎$if-false</code> ===
=== <code>‎$if-false</code> ===
القيمة التي ستُعاد إن كان <code>‎$condition</code> '''خاطئًا.'''  
القيمة التي ستُعاد إن لم يكن الشرط <code>‎$condition</code> محقَّقًا'''.'''  


== القيم المعادة ==
== القيم المعادة ==
<code>‎$if-true</code> أو <code>‎$if-false</code>.
تُعاد القيمة <code>‎$if-true</code> أو القيمة <code>‎$if-false</code> بناءً على تحقق الشرط <code>‎$condition</code>.


== أمثلة ==
== أمثلة ==
مثال عن استخدام الدالة <code>if()‎</code>:<syntaxhighlight lang="sass">
مثال عن استخدام الدالة <code>if()‎</code> لإضافة إطار <code>[[CSS/border|border]]</code> للعنصر اعتمادًا على شرطٍ معيّن:<syntaxhighlight lang="sass">
if(true, 1px, 2px) // 1px
$border-type: "none";
if(false, 1px, 2px) // 2px
 
.selector {
  border: if($border-type == "none", "none", "1px soild black");
}
 
 
</syntaxhighlight>ستُصرّف الشيفرة السابقة إلى شيفرة CSS الآتية:<syntaxhighlight lang="css">
.selector {
  border: "none"; }
</syntaxhighlight>
</syntaxhighlight>


== انظر أيضًا ==
== انظر أيضًا ==
* الدالة <code>[[Sass/call|call()]]</code>‎: تستدعي دالة بشكل ديناميكي.
* الدالة <code>[[Sass/call|call()]]</code>‎: تستدعي دالة بشكل ديناميكي.
* الدالة <code>[[Sass/function exists|function_exists()‎]]</code>: تتحقَّق إذا كانت دالةٌ ما موجودةً أم لا.
* الدالة <code>[[Sass/feature exists|feature_exists()]]</code>‎: تتحقَّق ما إذا كانت ميزة معينةٌ موجودةٌ في وقت تشغيل <nowiki/>[[Sass]].
* الدالة <code>[[Sass/mixin exists|mixin_exists()]]</code>‎: تتحقَّق ما إذا كان مخلوط ما موجودًا.
* الدالة <code>[[Sass/unitless|unitless()‎]]</code>: تتحقَّق ما إذا كان العدد الممرَّر إليها يملك واحدة أم لا.


== مصادر ==
== مصادر ==
* [https://sass-lang.com/documentation/Sass/Script/Functions.html#if-instance_method قسم الدالة if في صفحة الدوال في توثيق Sass الرسمي.]
* [https://sass-lang.com/documentation/Sass/Script/Functions.html#if-instance_method قسم الدالة if في صفحة الدوال في توثيق Sass الرسمي].
[[تصنيف:Sass]]
[[تصنيف:Sass|{{SUBPAGENAME}}]]
[[تصنيف: Sass Function]]
[[تصنيف: Sass Function|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 07:01، 20 مايو 2018

تعيد الدالة ()if إحدى القيمتين الممرَّرتين إليها اعتمادًا على تحقُّق شرط معين. تشبه تمامًا التعليمة ‎@if، إذ تُعدّ جميع القيم صحيحةً باستثناء القيمة false والقيمة null.

البنية العامة

if($condition, $if-true, $if-false)

المعاملات

‎$condition

الشرط المراد التحقق من صحته.

‎$if-true

القيمة التي ستُعاد إن كان الشرط ‎$condition محقَّقًا.

‎$if-false

القيمة التي ستُعاد إن لم يكن الشرط ‎$condition محقَّقًا.

القيم المعادة

تُعاد القيمة ‎$if-true أو القيمة ‎$if-false بناءً على تحقق الشرط ‎$condition.

أمثلة

مثال عن استخدام الدالة if()‎ لإضافة إطار border للعنصر اعتمادًا على شرطٍ معيّن:

$border-type: "none";

.selector {
  border: if($border-type == "none", "none", "1px soild black");
}

ستُصرّف الشيفرة السابقة إلى شيفرة CSS الآتية:

.selector {
  border: "none"; }

انظر أيضًا

  • الدالة call()‎: تستدعي دالة بشكل ديناميكي.
  • الدالة function_exists()‎: تتحقَّق إذا كانت دالةٌ ما موجودةً أم لا.
  • الدالة feature_exists()‎: تتحقَّق ما إذا كانت ميزة معينةٌ موجودةٌ في وقت تشغيل Sass.
  • الدالة mixin_exists()‎: تتحقَّق ما إذا كان مخلوط ما موجودًا.
  • الدالة unitless()‎: تتحقَّق ما إذا كان العدد الممرَّر إليها يملك واحدة أم لا.

مصادر