الفرق بين المراجعتين ل"Sass/abs"
< Sass
اذهب إلى التنقل
اذهب إلى البحث
جميل-بيلوني (نقاش | مساهمات) ط (تنسيق بعض الأمور البسطية.) |
|||
| سطر 21: | سطر 21: | ||
المثال 1: استخدام الدالة <code>abs()</code> لضبط قيمة الحواشي (<code>[[CSS/padding|padding]]</code>) والهوامش (<code>[[CSS/margin|margin]]</code>) إلى <code>20px</code>.<syntaxhighlight lang="sass"> | المثال 1: استخدام الدالة <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> | </syntaxhighlight> | ||
| سطر 38: | سطر 36: | ||
المثال 2: يبيّن هذا المثال عمل الدالة <code>abs()</code> مع قيمةٍ دون واحدة.<syntaxhighlight lang="sass"> | المثال 2: يبيّن هذا المثال عمل الدالة <code>abs()</code> مع قيمةٍ دون واحدة.<syntaxhighlight lang="sass"> | ||
.selector { | .selector { | ||
| − | + | z-index: abs(-5); // 5 | |
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| سطر 44: | سطر 42: | ||
ستُصرّف الشيفرة السابقة إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="sass"> | ستُصرّف الشيفرة السابقة إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="sass"> | ||
.selector { | .selector { | ||
| − | + | z-index: 5; } | |
| − | } | ||
| − | |||
</syntaxhighlight> | </syntaxhighlight> | ||
مراجعة 13:15، 7 مايو 2018
تعيد الدالة abs() القيمة المطلقة لعددٍ مُمرِّرٍ إليها.
البنية العامة
abs($number)
المعاملات
$number
العدد المراد إعادة القيمة المطلقة له.
القيم المعادة
يُعاد عدد صحيح من النوع Number يُمثِّل القيمة المطلقة للمعامل $number المُمرَّر إلى الدالة.
الأخطاء والاستثناءات
سيُرمى الخطأ ArgumentError إذا لم يكن المعامل $number عددًا.
أمثلة
المثال 1: استخدام الدالة abs() لضبط قيمة الحواشي (padding) والهوامش (margin) إلى 20px.
.selector {
padding: abs(-20px); // 20px
margin: abs(20px); // 20px
}
سيُصرّف المثال السابق إلى شيفرة CSS الآتية:
.selector {
padding: 20px;
margin: 20px; }
لاحظ في المثال السابق أننا وضعنا الواحدة px بين القوسين، إذ تعمل الدالة abs() على القيم العددية مع واحدة أو دونها.
المثال 2: يبيّن هذا المثال عمل الدالة abs() مع قيمةٍ دون واحدة.
.selector {
z-index: abs(-5); // 5
}
ستُصرّف الشيفرة السابقة إلى شيفرة CSS الآتية:
.selector {
z-index: 5; }
انظر أيضًا
- الدالة
ceil(): تقريب العدد إلى أقرب عدد صحيح أكبر منه. - الدالة
floor(): تقريب العدد إلى أقرب عدد صحيح أصغر منه. - الدالة
max(): معرفة أكبر قيمة من بين مجموعة من الأعداد. - الدالة
min(): معرفة أصغر قيمة من بين مجموعة من الأعداد.