Sass/function directives

يمكن تعريف دوالّ خاصَّةٍ بك في Sass واستخدامها في أيِّ سياق أو على أيّ قيمة داخل الملف البرمجي مثل:

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

ستُصبح الشيفرة بعد تصريفها:

#sidebar {
 width: 240px; }

لاحظ أنَّه يمكن للدوال الوصول إلى كل المتغيرات العامَّة وقبول الوسائط كما تفعل المخاليط (mixins). قد تحتوي الدالة على العديد من العبارات البرمجيَّة، ويجب استدعاء ‎@return لتعيد الدالة قيمة محدَّدة. كما هو الحال في المخاليط، يمكنك استدعاء الدوالّ المُعرّفة في Sass باستخدام الوسائط المُسمّاة. يمكننا في المثال أعلاه استدعاء الدالة بالطريقة التالية:

#sidebar { width: grid-width($n: 5); }

يُستحسن أن تحتوي اسم الدالة على بادئةً معينة لتجنب التداخل في الأسماء ولِيعلّم من يقرأ ملف الأنماط خاصتك أنَّها ليست جزءًا من Sass أو CSS. إن كنت تعمل مثلًا في شركة تُسمّى Hsoub، فلعلّك ترغب في إعطاء الدالة أعلاه الاسم ‎-hsoub-grid-width.

تدعم الدوال التي يُعرّفها المستخدمين أيضًا الوسائط المتغيرة تمامًا مثل المخاليط.

لأسباب تاريخية، لا يوجد فرق بين استعمال الشرطات العاديَّة والشرطات السفليَّة في أسماء الدوال (وجميع معرفات Sass الأخرى). إن عَرًفت مثلً دالةً تُسمى grid-width، فيمكنك الإشارة إليها بالاسم grid_width أيضًا، والعكس بالعكس.

مصادر

• قسم Function Directives من توثيق Sass الرسمي.