الفرق بين المراجعتين لصفحة: «Sass/abs»
< Sass
جميل-بيلوني (نقاش | مساهمات) ط تدقيق الصفحة ومراجعتها. |
ط استبدال النص - 'توثيق Sass الرسمي.]' ب'توثيق Sass الرسمي].' |
||
| (4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 21: | سطر 21: | ||
مثال عن استخدام الدالة <code>abs()</code> لضبط قيمة الحواشي (<code>[[CSS/padding|padding]]</code>) والهوامش (<code>[[CSS/margin|margin]]</code>) إلى <code>20px</code>:<syntaxhighlight lang="sass"> | مثال عن استخدام الدالة <code>abs()</code> لضبط قيمة الحواشي (<code>[[CSS/padding|padding]]</code>) والهوامش (<code>[[CSS/margin|margin]]</code>) إلى <code>20px</code>:<syntaxhighlight lang="sass"> | ||
.selector { | .selector { | ||
padding: abs(-20px); // 20px | |||
margin: abs(20px); // 20px | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| سطر 28: | سطر 28: | ||
سيُصرّف المثال السابق إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css"> | سيُصرّف المثال السابق إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css"> | ||
.selector { | .selector { | ||
padding: 20px; | |||
margin: 20px; } | |||
</syntaxhighlight> | |||
</ | لاحظ في المثال السابق أننا وضعنا الواحدة <code>px</code> بين القوسين، إذ تعمل الدالة <code>abs()</code> على القيم العددية مع واحدة أو دونها. | ||
يبيّن هذا المثال عمل الدالة <code>abs()</code> مع قيمةٍ دون واحدة:<syntaxhighlight lang="sass"> | |||
.selector { | .selector { | ||
z-index: abs(-5); // 5 | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| سطر 42: | سطر 42: | ||
ستُصرّف الشيفرة السابقة إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="sass"> | ستُصرّف الشيفرة السابقة إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="sass"> | ||
.selector { | .selector { | ||
z-index: 5; } | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | == انظر أيضًا == | ||
* الدالة <code>[[Sass/ceil|ceil()]]</code>: | * الدالة <code>[[Sass/ceil|ceil()]]</code>: تقرِّب العدد إلى أقرب عدد صحيح أكبر منه. | ||
* الدالة <code>[[Sass/floor|floor()]]</code>: | * الدالة <code>[[Sass/floor|floor()]]</code>: تقرِّب العدد إلى أقرب عدد صحيح أصغر منه. | ||
* الدالة <code>[[Sass/max|max()]]</code>: | * الدالة <code>[[Sass/max|max()]]</code>: تعيد أكبر قيمة من بين مجموعة من الأعداد الممرَّرة إليها. | ||
* الدالة <code>[[Sass/min|min()]]</code>: | * الدالة <code>[[Sass/min|min()]]</code>: تعيد أصغر قيمة من بين مجموعة من الأعداد الممرَّرة إليها. | ||
== مصادر == | == مصادر == | ||
* [https://sass-lang.com/documentation/Sass/Script/Functions.html#declare-class_method قسم الدالة abs في صفحة الدوال في توثيق Sass الرسمي. | * [https://sass-lang.com/documentation/Sass/Script/Functions.html#declare-class_method قسم الدالة abs في صفحة الدوال في توثيق Sass الرسمي]. | ||
[[تصنيف:Sass]] | [[تصنيف:Sass|{{SUBPAGENAME}}]] | ||
[[تصنيف: Sass Function]] | [[تصنيف: Sass Function|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 07:01، 20 مايو 2018
تعيد الدالة abs() القيمة المطلقة لعددٍ مُمرِّرٍ إليها.
البنية العامة
abs($number)
المعاملات
$number
العدد المراد إعادة القيمة المطلقة له.
القيم المعادة
يُعاد عدد صحيح من النوع Number يُمثِّل القيمة المطلقة للمعامل $number المُمرَّر إلى الدالة.
الأخطاء والاستثناءات
سيُرمى الخطأ ArgumentError إذا لم يكن المعامل $number عددًا.
أمثلة
مثال عن استخدام الدالة abs() لضبط قيمة الحواشي (padding) والهوامش (margin) إلى 20px:
.selector {
padding: abs(-20px); // 20px
margin: abs(20px); // 20px
}
سيُصرّف المثال السابق إلى شيفرة CSS الآتية:
.selector {
padding: 20px;
margin: 20px; }
لاحظ في المثال السابق أننا وضعنا الواحدة px بين القوسين، إذ تعمل الدالة abs() على القيم العددية مع واحدة أو دونها.
يبيّن هذا المثال عمل الدالة abs() مع قيمةٍ دون واحدة:
.selector {
z-index: abs(-5); // 5
}
ستُصرّف الشيفرة السابقة إلى شيفرة CSS الآتية:
.selector {
z-index: 5; }
انظر أيضًا
- الدالة
ceil(): تقرِّب العدد إلى أقرب عدد صحيح أكبر منه. - الدالة
floor(): تقرِّب العدد إلى أقرب عدد صحيح أصغر منه. - الدالة
max(): تعيد أكبر قيمة من بين مجموعة من الأعداد الممرَّرة إليها. - الدالة
min(): تعيد أصغر قيمة من بين مجموعة من الأعداد الممرَّرة إليها.