وحدات SASS

تشرح هذه المقالة وحدات SASS۔

نشرح كيفية كتابة SASS بأسلوب الوحدات باستخدام @use و@forward، وكيفية إعادة استخدام المتغيرات، والمزيجات، والدوال، وإعدادات السمات، وواجهات برمجة التطبيقات العامة۔

YouTube Video

وحدات SASS

يساعد نظام الوحدات في SASS على تحديد نطاق الأنماط بوضوح ويوفر تصميمًا يسهل إعادة استخدامه وصيانته۔

المفاهيم الأساسية للوحدات

تحل وحدات SASS مشاكل تلوث المساحة الاسمية العامة والاعتماديات غير الواضحة التي كانت موجودة في الأمر القديم @import۔ يتم تحميل كل ملف كوحدة مع مساحة اسم خاصة به، ولا يمكن الوصول إلا إلى العناصر المصدرة صراحة من ملفات أخرى۔

مثال على هيكل الملفات

أولاً، إليك مثال على بنية مشروع واقعية۔ أدناه مثال على نظام تصميم صغير۔

 1styles/
 2├─ _variables.scss
 3├─ _mixins.scss
 4├─ _functions.scss
 5├─ components/
 6│  ├─ _button.scss
 7│  └─ _card.scss
 8├─ utilities/
 9│  └─ _helpers.scss
10└─ main.scss

• يجعل هذا الهيكل عملية التقسيم إلى وحدات واختبار واستبدال الأجزاء أسهل۔
• تحتوي الملفات الجزئية على شرطة سفلية في بداية اسم الملف۔

أساسيات @use

يقوم @use بتحميل وحدة ويوفر مساحة اسم۔ يمنع هذا تصادم الأسماء ويوضح وحدة المصدر۔

1// _variables.scss
2$primary-color: #0a74da;
3$padding-base: 12px;

• هذا الملف بسيط حيث يعرف فقط المتغيرات۔ يمكن الإشارة مباشرة إلى المتغيرات المصدرة من وحدة باستخدام @use۔

1// main.scss
2@use 'variables';
3
4.example {
5  color: variables.$primary-color;
6  padding: variables.$padding-base;
7}

• هنا، يتم الرجوع إلى وحدة variables باستخدام مساحة الاسم variables.۔ تجعل هذه الطريقة أصل كل عنصر واضحاً۔

تقليص أو إعادة تسمية مساحات الاسم

استخدام as يسمح لك بتقليص مساحة الاسم۔

1@use 'variables' as vars;
2
3.btn {
4  color: vars.$primary-color;
5}

• هذا مثال على استيراد variables باستخدام الاسم المختصر vars۔ اختر أسماءً بناءً على ما إذا كنت تفضل القابلية للقراءة أو سهولة الكتابة۔

تعريف المزيج (Mixin)

يمكن أيضاً تعريف واستخدام المزج والدوال داخل الوحدات۔ الاحتفاظ بالتعليقات متسقة مع معايير المشروع يساعد على الوضوح۔

1// _mixins.scss
2// Create a simple responsive container mixin
3@mixin container($max-width: 1200px) {
4  width: 100%;
5  margin-left: auto;
6  margin-right: auto;
7  max-width: $max-width;
8}

• هذا الملف يعرف مزج للحاويات۔ يأخذ وسائط ويوفر قيم افتراضية۔

1// main.scss
2@use 'mixins' as m;
3
4.wrapper {
5  @include m.container(1000px);
6}

• هذا مثال على استخدام مزج مع @include۔

تعريف الدوال

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

1// _functions.scss
2@use 'sass:math';
3
4// Create a simple px-to-rem converter function
5@function to-rem($px, $base: 16) {
6  @return math.div($px, $base) * 1rem;
7}

• يعرّف هذا الملف دالة لتحويل القيم من البكسل إلى الريم (rem)۔ كذلك يتم تحديد قيمة أساسية افتراضية۔

1// main.scss
2@use 'functions' as f;
3
4.title {
5  font-size: f.to-rem(24);
6}

• فيما يلي مثال على استدعاء دالة باستخدام @use وتطبيق النتيجة على النمط۔

تصدير الوحدة و@forward (تصميم واجهة البرمجة)

عندما ترغب بإظهار عدة ملفات داخلية خارجياً، يمكنك استخدام @forward لإنشاء 'واجهة برمجة تطبيقات عامة'۔

1// _index.scss (module entry)
2@forward 'variables';
3@forward 'mixins';
4@forward 'functions';

• يمكن تجميع عدة ملفات داخلية كنقطة دخول واحدة توفر بعد ذلك واجهة برمجة تطبيقات عامة۔ يسمح ذلك للمستخدمين بالوصول إلى جميع الميزات المطلوبة باستيراد نقطة دخول واحدة فقط۔

1// main.scss
2@use 'index' as ds; // ds = design system
3
4.button {
5  color: ds.$primary-color;
6  @include ds.container();
7}

• يتم الوصول إلى محتويات variables وmixins مجتمعةً من خلال index۔ يجعل @forward من index الطبقة العامة۔

التحكم في واجهة البرمجة باستخدام خيارات show / hide في @forward

إذا كنت ترغب في إظهار متغيرات محددة فقط، استخدم خيار show أو hide۔

1// _variables.scss
2$internal-thing: 10px !default; // for internal use
3$primary-color: #0a74da !default;
4$secondary-color: #f5f5f5 !default;

• إضافة !default تتيح لك نشر قيمة قابلة للتجاوز۔

1// _index.scss
2@forward 'variables' show $primary-color, $secondary-color;
3@forward 'mixins';

• باستخدام show مع @forward، يمكنك تقييد واجهة البرمجة العامة بالعناصر الضرورية فقط۔ المتغيرات والدوال المستخدمة داخلياً لن تكون مرئية من الخارج۔

جعل الوحدات قابلة للتكوين (باستخدام with)

إذا استخدمت !default في الوحدة، يمكن تجاوز القيم باستخدام with عند الاستيراد۔

1// _theme.scss
2$brand-color: #ff6600 !default;
3$radius: 4px !default;
4
5@mixin button-style() {
6  background-color: $brand-color;
7  border-radius: $radius;
8}

• الوحدة التي تحتوي على قيم افتراضية معرفة بـ!default يمكنها قبول التكوينات عبر with۔

1// main.scss
2@use 'theme' with (
3  $brand-color: #2288ff,
4  $radius: 8px
5);
6
7.my-btn {
8  @include theme.button-style();
9}

• يسمح with في @use بتجاوز المتغيرات الافتراضية في الوحدة أثناء الاستيراد۔ هذا مفيد لتبديل السمات۔
• لاحظ أن with يعمل فقط وقت الاستيراد ولا يمكنك تغيير تلك القيم لاحقاً۔

مثال عملي: مكون الزر (مثال كامل)

لنحاول تصميم أنماط الأزرار باستخدام الوحدات۔ أولاً، افصل المتغيرات والمزج في وحدات منفصلة۔

1// _variables.scss
2$btn-padding-y: 8px !default;
3$btn-padding-x: 16px !default;
4$btn-font-size: 14px !default;
5$btn-primary-bg: #0a74da !default;
6$btn-primary-color: #fff !default;

• يتم تعريف المتغيرات الافتراضية للأزرار هنا۔ يتيح استخدام !default للمستخدمين تجاوز هذه القيم۔

 1// _mixins.scss
 2@use "variables" as v;
 3
 4@mixin btn-base() {
 5  display: inline-flex;
 6  align-items: center;
 7  justify-content: center;
 8  padding: v.$btn-padding-y v.$btn-padding-x;
 9  font-size: v.$btn-font-size;
10  border: none;
11  cursor: pointer;
12}

• يتم تعريف المزج الأساسي للأزرار هنا۔ يتم فصلها لسهولة إعادة الاستخدام۔

 1// _button.scss
 2@use 'variables' as v;
 3@use 'mixins' as m;
 4
 5.button {
 6  @include m.btn-base();
 7  background: v.$btn-primary-bg;
 8  color: v.$btn-primary-color;
 9  border-radius: 4px;
10  transition: opacity 0.15s ease;
11  &:hover { opacity: 0.9; }
12}
13
14.button--large {
15  padding: calc(v.$btn-padding-y * 1.5) calc(v.$btn-padding-x * 1.5);
16  font-size: v.$btn-font-size * 1.25;
17}

• يتم إنشاء أنماط الأزرار باستخدام إشارات مساحة الاسم مع @use۔ تم تعريف نوع كـ .button--large۔

1// main.scss
2@use 'button'; // or @use 'index' that forwards button, variables, mixins

• عند استيراد وحدة button، يمكنك استخدام أنماط الأزرار مباشرة۔

تبديل السمة (باستخدام عدة ملفات سمات)

يمكن تبديل السمة عبر التكوين باستخدام with أو بإنشاء وحدات منفصلة وتغيير أي واحد يتم استخدامه مع @use۔

1// themes/_light.scss
2$brand-color: #0a74da !default;

1// themes/_dark.scss
2$brand-color: #111827 !default;

• حدد ألوان العلامة التجارية والإعدادات الأخرى في عدة ملفات سمات وقم بتبديلها أثناء عملية البناء أو الاستيراد۔

1// main.scss (light theme)
2@use 'theme' with ($brand-color: #0a74da);
3@use 'button';

• اختر السمة إما باستخدام with أو عبر الاستيراد، على سبيل المثال، @use 'themes/light' أثناء عملية البناء۔

خاص وعام (بادئة _ و !default)

في SASS، إضافة شرطة سفلية في بداية اسم الملف تعني أنه ملف جزئي۔ ومع ذلك، عند إدارة رؤية تصدير الوحدة، استخدم show و hide مع @forward للتحكم فيما يتم تصديره۔

يمكنك استخدام @forward لتنظيم واجهة البرمجة العامة وإخفاء التنفيذات الداخلية عن الخارج۔

أفضل الممارسات للاستخدام في العالم الحقيقي

فيما يلي بعض المفاهيم الأساسية المفيدة عند استخدام SASS في الحالات العملية۔ ستساعدك جميع هذه الإرشادات على تقليل الارتباك أثناء التطوير والحفاظ على تنظيم الكود الخاص بك۔

• إذا كان من المحتمل أن تتغير المتغيرات كجزء من السمة، أضف !default۔ يُسهّل ذلك على المستخدمين تجاوز القيم۔
• يجب تقسيم الوحدات حسب المسؤولية والتركيز على هدف واحد فقط۔ تصبح الإدارة أسهل عند فصل المتغيرات، والمزيجات (mixins)، والمكوّنات۔
• قم بإدارة المحتوى العام باستخدام @forward واستخدم show أو hide حسب الحاجة۔ تحديد نطاق ما هو عام يؤدي إلى تصميم أكثر أماناً۔
• استخدم مساحات الاسم لتوضيح الوحدة التي تنتمي إليها كل دالة۔ يمنع ذلك الالتباس مع كود آخر۔
• تذكر أن with يعمل فقط عند تنفيذ @use۔ نظراً لأنك لا تستطيع تغييرها لاحقاً، قم بإعداد التكوينات عند الاستيراد۔
• استخدم شرطة سفلية في بداية أسماء الملفات لجعلها جزئية، حتى لا يتم تجميعها بشكل منفصل۔ يسهل هذا الجمع بين الملفات في هيكل أكبر۔
• إدراج أمثلة للاستخدام في وحدة index يساعد في الاختبار والتوثيق۔ يصبح من الأسهل للمستخدمين فهم السلوك۔

ستساعدك مراعاة هذه النقاط في إدارة المشاريع الكبيرة والحفاظ على الكود قابل للقراءة كفريق۔

الملخص

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

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

YouTube Video