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

مراجعة 12:24، 2 مايو 2018

تعيد الدالة abs()‎ القيمة المطلقة لعددٍ مُمرِّرٍ إليها.

abs($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;
}

@@ سطر 19: / سطر 19: @@
 == أمثلة ==
-مثال عن استخدام الدالة <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 {
    padding: abs(-20px); // 20px
@@ سطر 34: / سطر 34: @@
 </syntaxhighlight>
-لاحظ في المثال السابق أننا وضعنا الواحدة <code>px</code> بين القوسين، إذ تعمل الدالة <code>abs()‎</code> على القيم العددية مع واحدة أو دونها. المثال الآتي يبيّن عملها على قيمةٍ دون وحدة:<syntaxhighlight lang="sass">
+لاحظ في المثال السابق أننا وضعنا الواحدة <code>px</code> بين القوسين، إذ تعمل الدالة <code>abs()‎</code> على القيم العددية مع واحدة أو دونها.
+المثال 2: يبيّن هذا المثال عمل الدالة <code>abs()‎</code>  مع قيمةٍ دون واحدة.<syntaxhighlight lang="sass">
 .selector {
    z-index: abs(-5); // 5