13- كورس SaaS للمبتدئين – Functions في SASS

مقدمة عن Functions في SASS

تعتبر Functions في SASS واحدة من الميزات القوية التي تجعل من عملية تطوير CSS أكثر كفاءة ومرونة. تمكننا هذه الدوال من إعادة استخدام الكود وتقليل التكرار وزيادة سهولة الصيانة. تعمل الدوال في SASS بشكل مشابه للدوال في لغات البرمجة الأخرى، حيث يمكنها أخذ مجموعة من المعطيات وإرجاع قيمة.

تستخدم Functions عادة للقيام بعمليات حسابية معقدة، أو لتحويل القيم، أو لتصفية البيانات. يتم تعريف الدوال في SASS باستخدام الكلمة الأساسية @function متبوعة باسم الدالة. يمكن للدوال أن تتضمن معاملات اختيارية أو إجبارية، وتستخدم الكلمة @return لإرجاع النتيجة النهائية.

كيفية استخدام Functions في SASS

لإنشاء دالة في SASS، يجب عليك أولاً تحديد الهدف من الدالة، وما هي المعطيات التي تحتاجها لإنتاج النتيجة المطلوبة. يمكن أن تكون المعطيات ألوانًا، أو أرقامًا، أو حتى سلاسل نصية. بعد ذلك، تقوم بكتابة منطق الدالة باستخدام قواعد SASS، وتستخدم @return لإرجاع النتيجة.

إليك مثال يوضح كيفية إنشاء دالة لتحويل وحدات البكسل إلى وحدات ريم، والتي تعتبر من الوحدات المفضلة في تصميم الويب بسبب مرونتها في الاستجابة:

@function px-to-rem($px, $base-font-size: 16px) {
  @return #{$px / $base-font-size}rem;
}

.element {
  font-size: px-to-rem(32); // ستكون النتيجة 2rem
}

في هذا المثال، تقوم الدالة px-to-rem بتحويل القيمة المعطاة بوحدة البكسل إلى وحدة الريم باستخدام قاعدة تحويل بسيطة. يتم تمرير القيمة الافتراضية لحجم الخط الأساسي كمعامل اختياري، مما يسمح بالمرونة في استخدام الدالة مع أحجام خطوط مختلفة.

أمثلة إضافية على استخدام Functions في SASS

يمكن استخدام الدوال في SASS لأغراض متعددة، مثل توليد ألوان مخصصة أو حساب المسافات بين العناصر. على سبيل المثال، يمكن إنشاء دالة تقوم بتفتيح اللون بإضافة نسبة مئوية معينة إلى قيمة السطوع.

@function lighten($color, $percentage) {
  @return lighten($color, $percentage);
}

.button {
  background-color: lighten(#3498db, 20%);
}

في هذا المثال، تقوم الدالة lighten بتفتيح اللون الأزرق بنسبة 20%. الدالة lighten مدمجة في SASS، لكنك تستطيع تعريف دوال مشابهة لتعزيز التحكم في الألوان أو القيم الأخرى في مشروعك.