9- كورس SaaS للمبتدئين – استخدام @use و @forward لتنظيم المشروع في SASS

مفهوم @use و @forward في SASS

في عالم تطوير الويب، يُعتبر SASS من الأدوات المهمة التي تُستخدم لتحسين عملية كتابة CSS. واحدة من الميزات الحديثة في SASS هي استخدام الأوامر @use و @forward، والتي تتيح للمطورين تنظيم ملفاتهم بشكل أكثر فعالية. إن الهدف الأساسي من هذه الأوامر هو تحسين إمكانية إعادة استخدام الشفرات البرمجية وتقليل التكرار، مما يُسهّل صيانة المشروع وتوسيع نطاقه.

أمر @use يتيح لك استيراد ملفات SASS الأخرى، مع الحفاظ على إمكانية التحكم في المتغيرات والوظائف والـmixins. يمكننا من خلالها استخدام الملف المستورد بفعالية دون القلق من التعارض بين الأسماء. أما @forward، فهي تُستخدم لنقل محتوى الملف إلى ملف آخر، مما يتيح لك تنظيم الشفرات في وحدات مستقلة وإعادة استخدامها في أماكن متعددة.

كيفية استخدام @use و @forward مع أمثلة

لنبدأ بفهم كيفية استخدام @use. عند استيراد ملف باستخدام @use، يتم التعامل مع محتوياته كجزء من وحدة مستقلة، مما يعني أنه يجب عليك استخدام اسم الوحدة عند استدعاء المتغيرات أو الـmixins. لنلقي نظرة على المثال التالي:

prompt
// _variables.scss
$primary-color: #333;
$secondary-color: #777;

// styles.scss
@use \'variables\';

body {
    background-color: variables.$primary-color;
    color: variables.$secondary-color;
}

في هذا المثال، قمنا بإنشاء ملف _variables.scss يحتوي على متغيرات الألوان، ثم استخدمنا @use لاستيراد هذا الملف في styles.scss. لاحظ كيف أننا استخدمنا اسم الوحدة variables عند استدعاء المتغيرات.

أما فيما يتعلق بـ@forward، فهي تُستخدم لنقل محتويات الملف إلى ملف آخر. هذا يسمح لك بإنشاء وحدات مستقلة يمكن استخدامها في مختلف أجزاء المشروع. إليك كيفية استخدامها:

prompt
// _buttons.scss
$button-padding: 10px;
@mixin button-style {
    padding: $button-padding;
    border-radius: 5px;
}

// _index.scss
@forward \'buttons\';

// styles.scss
@use \'index\';

.button {
    @include index.button-style;
}

في هذا المثال، قمنا بإنشاء ملف _buttons.scss يحتوي على mixin خاص بالأزرار، ثم قمنا بنقل محتوياته إلى ملف _index.scss باستخدام @forward. وأخيرًا، استخدمنا الملف index في styles.scss لاستدعاء الـmixin المعرّف في _buttons.scss. هذه الطريقة تساعد في تنظيم الشفرات بشكل يجعلها قابلة لإعادة الاستخدام بسهولة في المشاريع الكبيرة.