‏`@forward` في SASS

تشرح هذه المقالة عن ‏@forward في SASS۔

سنشرح التوجيه @forward بطريقة سهلة الفهم، مع أمثلة عملية.۔

YouTube Video

‏@forward في SASS

ما هو ‏@forward؟

في نظام الوحدات في SASS، تستخدم ‏@use و@forward بدلاً من ‏@import۔ @forward هي ميزة مهمة للحفاظ على بنية مشروعك نظيفة. إنها توجيه يُستخدم 'لكشف' المتغيرات والمزجيات (mixins) والدوال المعرفة في ملفات أخرى.۔ بدلاً من استخدامه بمفرده، يعمل كنقطة دخول تحدد 'استخدم هذه الوحدة من هنا.'۔

1@forward "variables";

• يعني هذا الكود 'جعل محتويات ‏variables.scss متاحة للاستخدام من ملفات أخرى.'۔

الفرق بين ‏@use و‏@forward

كل من ‏@use و‏@forward هي صيغ للتعامل مع الوحدات، لكن أهدافهما مختلفة بوضوح۔ ‏@use هو توجيه لاستخدام العناصر داخل الملف، بينما ‏@forward هو توجيه لجعل العناصر متاحة لملفات أخرى۔

1// @use: import the module for use in this file
2@use "variables";
3
4// @forward: re-export the module for other files to consume
5@forward "variables";

• ‏@use يمثل التبعيات اللازمة لتنفيذ الملف الحالي، في حين أن ‏@forward يجعل الملف يعمل كنقطة دخول API عامة۔ فهم هذا الفرق سيساعدك على تحديد مكان استخدام ‏@forward۔

لماذا ‏@forward ضروري؟

مع إضافة المزيد من ملفات Sass، قد تحتاج إلى كتابة العديد من عبارات ‏@use۔ باستخدام ‏@forward، يمكنك مركزة كل شيء في ملف دخول واحد۔

1styles/
2├─ foundation/
3│  ├─ _variables.scss
4│  ├─ _mixins.scss
5│  └─ _index.scss
6└─ main.scss

• في هذا الهيكل، يعمل ‏_index.scss كـ'واجهة API عامة'.۔

الاستخدام الأساسي لـ ‏@forward

لنلقِ نظرة على الاستخدام الأساسي لـ ‏@forward۔

1// _variables.scss
2// Color definitions used across the project
3
4$primary-color: #006ab1;
5$secondary-color: #e0f0ff;
6
7// Internal use only (will be hidden via @forward hide)
8$debug-color: magenta;

• بدلاً من استخدام هذا المتغير مباشرة عبر ‏@use، يمكنك تجميعها باستخدام ‏@forward۔

1// _index.scss
2@forward "variables";

• في هذه المرحلة، لا يحتوي ‏_index.scss على شيء؛ إنه مجرد ملف ترحيل۔

استخدام الوحدات التي تم تمريرها بـ ‏@forward

بدلاً من استخدام الملفات الفردية مباشرة عبر ‏@use، تقوم فقط بـ ‏@use لملف الـindex الذي جمع جميع الـ‏@forward على جانب المستهلك۔ يتيح لك هذا استخدامه كواجهة مستقرة دون الحاجة لمعرفة الهيكل الداخلي۔

1// main.scss
2// Import the public API of the foundation layer
3@use "foundation";
4
5.button {
6  background-color: foundation.$primary-color;
7}

• مع هذا التصميم، حتى إذا تغيرت مواقع تعريف المتغيرات أو الـmixins، يمكنك تعديل الهيكل الداخلي دون الحاجة لتغيير أي كود عند المستهلك۔

دمج عدة وحدات مع ‏@forward

في التطوير الفعلي، من الشائع تقسيم المتغيرات والمزجيات (mixins) والدوال حسب أدوارها.۔ يمكن كتابة @forward عدة مرات، مما يتيح لك تجميع الوحدات المفصولة في واجهة برمجة تطبيقات (API) عامة واحدة.۔

فيما يلي، نقدم أمثلة على المزجيات (mixins) والدوال ونوضح تصميماً يعرضها للخارج كواجهة واحدة.۔

 1// _mixins.scss
 2// Reusable mixins for layout and components
 3
 4// Reset default button styles
 5@mixin button-reset {
 6  appearance: none;
 7  background: none;
 8  border: none;
 9  padding: 0;
10  margin: 0;
11  font: inherit;
12  color: inherit;
13}
14
15// Clearfix utility
16@mixin clearfix {
17  &::after {
18    content: "";
19    display: table;
20    clear: both;
21  }
22}
23
24// Internal mixin (not intended to be part of the public API)
25@mixin debug-outline {
26  outline: 2px dashed red;
27}

 1// _functions.scss
 2// Utility functions for consistent styling
 3
 4@use "sass:math";
 5
 6// Convert px to rem based on a 16px root size
 7@function rem($px) {
 8  @return math.div($px, 16) * 1rem;
 9}
10
11// Clamp a value between a minimum and maximum
12@function clamp-value($value, $min, $max) {
13  @return math.max($min, math.min($value, $max));
14}

1// _index.scss
2// Re-export variables, mixins, and functions as a single public API
3@forward "variables";
4@forward "mixins";
5@forward "functions";

• من خلال كشف ملف الـindex فقط للخارج، يمكنك إخفاء البنية الداخلية وتقديم واجهة سهلة الاستخدام للمستهلكين۔

منع تعارض الأسماء (‏as)

إذا تم تعريف نفس اسم المتغير أو الـmixin في عدة وحدات، يمكنك تحديد ‏as مع ‏@forward لإضافة بادئة عند كشفها لمنع تعارض الأسماء۔

1// Add a prefix when re-exporting to avoid name collisions
2@forward "variables" as var-*;

مع هذا الكود، سيتم كشف ‏$primary-color في variables بالاسم التالي:۔

1// foundation.$var-primary-color

• هذه الطريقة هي أسلوب لتحديد قواعد التصميم بوضوح وتوسيع النطاق بأمان، وهي تقنية أساسية خصوصاً في المشاريع الكبيرة أو المكتبات المشتركة۔

إخفاء الأعضاء غير الضروريين (‏hide)

قد تحتوي الوحدات على متغيرات أو ميكسينات مخصصة للتنفيذ الداخلي فقط۔ باستخدام ‏hide، يمكنك استثناؤها عند إعادة الكشف ومنع الوصول إليها خارجيًا۔

1// Re-export everything except internal debug variables
2@forward "variables" hide $debug-color;

مع هذا التكوين، تكون ‏$debug-color صالحة فقط داخل الوحدة، مما يساعد على منع استخدامه بالخطأ من المستهلكين۔

تحديد الأعضاء التي يجب كشفها (‏show)

إذا كنت تريد كشف بعض الـmixins أو الدوال فقط، استخدم ‏show۔ عن طريق تحديد ما يتم كشفه، يمكنك توضيح هدف الوحدة (module) وقصد التصميم الخاص بها.۔

1// Explicitly expose only selected mixins as the public API
2@forward "mixins" show button-reset, clearfix;

• باستخدام ‏show بهذه الطريقة، يصبح من الواضح مباشرةً أي APIs متاحة رسمياً للاستخدام۔

لا يمكن استخدام ‏@forward بمفرده

من النقاط الهامة أن المتغيرات التي تم تمريرها بـ‏@forward لا يمكن استخدامها داخل نفس الملف۔

1@forward "variables";
2
3.test {
4  color: $primary-color; // Error
5}

• ‏@forward هو فقط من أجل 'إعادة الكشف'، و'الاستخدام' هو دور ‏@use۔

مثال على الفصل الصحيح للأدوار

في تصميم وحدات Sass، من المثالي الفصل الواضح بين طبقة الواجهة العامة (API) وطبقة التنفيذ۔ ‏@forward يحدد واجهة API العامة، و‏@use يستهلكها من جانب التنفيذ۔

1// _index.scss (public API)
2@forward "variables";
3@forward "mixins";

1// _component.scss
2// Consume the public API of the foundation layer
3@use "foundation";
4
5.card {
6  color: foundation.$primary-color;
7}

• مع هذا الهيكل، يصبح من الواضح أي الأجزاء واجهات عامة وأيها تنفيذ داخلي، مما يؤدي إلى شفافية أفضل في التصميم۔

الفرق الجوهري عن ‏@import

‏@import يوسع جميع التعاريف المستوردة إلى النطاق العام۔ من ناحية أخرى، ‏@use و‏@forward يكشفان العناصر بشكل صريح ويتم الوصول إليها عبر أسماء نطاقات۔

 1// @import (deprecated)
 2// Everything is injected into the global scope
 3$color: red;
 4
 5.button-import {
 6  color: $color;
 7}
 8
 9// @use + @forward (recommended)
10// Access values explicitly through a namespace
11@use "foundation";
12
13.button-use {
14  color: foundation.$primary-color;
15}

• بسبب هذا الاختلاف، يمكنك تعزيز قابلية الصيانة والأمان بشكل كبير من خلال منع التعديلات غير المقصودة وإشكالات الاعتماديات۔

الملخص

‏@forward هو ميزة مهمة تدعم تصميمًا قابلًا للصيانة۔ عند الانتباه إلى 'ما يجب كشفه وما يجب إخفاؤه كتطبيق داخلي'، يصبح هيكل الأسلوب لديك أكثر أماناً وسهولة في القراءة۔ من خلال الاستخدام الصحيح لـ‏@use و‏@forward، يمكنك توضيح التبعيات وتحقيق تصميم قوي ومتين أمام التغييرات۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video