الفرق بين المراجعتين ل"Sass/abs"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
سطر 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;
 
 
}
 
}
  
لاحظ في المثال السابق أننا وضعنا الوحدة px بين القوسين، وتعمل الدالة abs()‎ على القيم العددية مع وحدة أو دون وحدة. المثال الآتي يبيّن عملها على قيمةٍ دون وحدة:
+
</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 الرسمي.