Sass/function directives

من موسوعة حسوب
< Sass
مراجعة 03:39، 10 أبريل 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات) (إضافة الصفحة)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)
اذهب إلى التنقل اذهب إلى البحث

من الممكن تعريف دوالّ خاصةٍ بك في 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، والعكس بالعكس.

مصادر