الفرق بين المراجعتين ل"Sass/abs"
< Sass
اذهب إلى التنقل
اذهب إلى البحث
سطر 17: | سطر 17: | ||
== أمثلة == | == أمثلة == | ||
− | مثال عن استخدام الدالة abs() لضبط قيمة الحواشي ([[CSS/padding|padding]]) والهوامش ([[CSS/margin|margin]]) إلى 20px: | + | مثال عن استخدام الدالة abs() لضبط قيمة الحواشي ([[CSS/padding|padding]]) والهوامش ([[CSS/margin|margin]]) إلى 20px:<syntaxhighlight lang="sass"> |
− | |||
.selector { | .selector { | ||
− | |||
padding: abs(-20px); // 20px | padding: abs(-20px); // 20px | ||
− | |||
margin: abs(20px); // 20px | margin: abs(20px); // 20px | ||
− | |||
} | } | ||
+ | </syntaxhighlight> | ||
− | سيُصرّف المثال السابق إلى شيفرة CSS الآتية: | + | سيُصرّف المثال السابق إلى شيفرة CSS الآتية:<syntaxhighlight lang="css"> |
− | |||
.selector { | .selector { | ||
− | |||
padding: 20px; | padding: 20px; | ||
− | |||
margin: 20px; | margin: 20px; | ||
− | |||
} | } | ||
− | + | </syntaxhighlight> | |
+ | لاحظ في المثال السابق أننا وضعنا الوحدة px بين القوسين، وتعمل الدالة abs() على القيم العددية مع وحدة أو دون وحدة. المثال الآتي يبيّن عملها على قيمةٍ دون وحدة:<syntaxhighlight lang="sass"> | ||
.selector { | .selector { | ||
− | |||
z-index: abs(-5); // 5 | z-index: abs(-5); // 5 | ||
− | |||
} | } | ||
+ | </syntaxhighlight> | ||
− | ستُصرّف الشيفرة السابقة إلى شيفرة CSS الآتية: | + | ستُصرّف الشيفرة السابقة إلى شيفرة CSS الآتية:<syntaxhighlight lang="sass"> |
− | |||
.selector { | .selector { | ||
− | |||
z-index: 5; | z-index: 5; | ||
+ | } | ||
− | + | </syntaxhighlight> | |
== انظر أيضًا == | == انظر أيضًا == |
مراجعة 14:19، 17 أبريل 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() على القيم العددية مع وحدة أو دون وحدة. المثال الآتي يبيّن عملها على قيمةٍ دون وحدة:
.selector {
z-index: abs(-5); // 5
}
ستُصرّف الشيفرة السابقة إلى شيفرة CSS الآتية:
.selector {
z-index: 5;
}
انظر أيضًا
- الدالة ceil(): تقريب العدد إلى أقرب عدد صحيح أكبر منه.
- الدالة floor(): تقريب العدد إلى أقرب عدد صحيح أصغر منه.
- الدالة max(): معرفة أكبر قيمة من بين مجموعة من الأعداد.
- الدالة min(): معرفة أصغر قيمة من بين مجموعة من الأعداد.
مصادر
- قسم الدالة abs في صفحة الدوال في توثيق Sass الرسمي.