في هذا الدرس 5تصفّح المواضيع
بينما تمنحك متغيرات CSS الحية تعديلات سريعة في المتصفح، يفتح لك تخصيص ملفات المصدر SCSS الباب الأوسع لإعادة هندسة بوتستراب 5.3 بالكامل وقت البناء: من تغيير نظام الخطوط والألوان الجذرية وتوليد كافة المكونات تلقائياً بها، إلى تفعيل ميزات معطلة افتراضياً واستبعاد المكونات غير المستخدمة نهائياً من الحزمة.
عند تثبيت الحزمة عبر npm install bootstrap ستجد مجلد scss/ مقسماً بنظام معياري نظيف. القاعدة المعمارية الصارمة هي عدم لمس أي ملف داخل مجلد node_modules إطلاقاً؛ لأن أي تحديث قادم للحزمة سيمحو تعديلاتك، وبدلاً من ذلك ننشئ ملفاً خاصاً بالمشروع مثل scss/custom.scss يستورد ما نحتاجه ويعيد ضبط المتغيرات بأمان.
عندما تختار الاستيراد الانتقائي للمكونات بدلاً من استيراد ملف bootstrap.scss الكامل، يجب احترام الترتيب المنطقي لاعتمادية الملفات حتى لا يفشل المترجم:
- استورد
functionsأولاً لتتوفر دوال حساب التباين والألوان مثلtint-color(). - اكتب تعديلات متغيرات مشروعك المخصصة هنا (مثل
$primary). - استورد
variablesثمvariables-dark(المضاف في 5.3 للوضع الداكن!). - استورد
mapsثمmixinsثمutilities. - استورد القاعدة الأساسية (
root,reboot,type) ثم المكونات التي يستخدمها موقعك فقط، واختم بملفutilities/apiلتوليد الكلاسات الخدمية.
<!-- custom.scss selective order:
1. @import "bootstrap/scss/functions";
2. $primary: #0f766e;
3. @import "bootstrap/scss/variables";
4. @import "bootstrap/scss/variables-dark";
5. @import "bootstrap/scss/maps";
-->
<div class="p-3 rounded-3 bg-primary text-white">
Compiled Lean Teal Theme
</div>تُكتب كل متغيرات بوتستراب الداخلية متبوعة بالراية الذكية !default مثل $primary: $blue !default;. تعني هذه الراية لمترجم Sass: «اعتمد اللون الأزرق فقط إذا لم يكن المطور قد عرّف قيمة سابقة لمتغير $primary».
وهذا يفسر لماذا نضع متغيراتنا المخصصة قبل استيراد ملف variables! فبمجرد كتابة $primary: #6f42c1; و$border-radius: 0.75rem; في الأعلى، يتجاهل بوتستراب قيمته الافتراضية ويشتق تلقائياً جميع درجات subtle وemphasis وألوان الأزرار وحلقات التركيز من لونك الجديد دفعة واحدة.
<!-- SCSS before @import "variables":
$primary: #6f42c1;
$border-radius: 0.9rem;
-->
<div class="compiled-demo p-3 border rounded bg-body">
<button type="button" class="btn btn-primary">
Recompiled Brand Button
</button>
</div>ماذا لو احتجت لإضافة لون تاسع جديد كلياً للوحة الدلالية ليولد له بوتستراب كلاسات .btn-indigo و.alert-indigo و.text-bg-indigo تلقائياً؟ يتم ذلك بتعديل خريطة $theme-colors باستخدام دالة map-merge() بعد استيراد variables وقبل استيراد ملف maps!
وبنفس السهولة يمكنك تقليص حجم CSS بحذف لون دلالي لا يستخدمه مشروعك عبر دالة map-remove($theme-colors, "info", "light") فيتوقف الإطار عن توليد عشرات الكلاسات المرتبطة به.
<!-- Between variables and maps:
$custom: ("indigo": #4f46e5);
$theme-colors: map-merge($theme-colors, $custom);
-->
<span class="badge text-bg-indigo me-2">Indigo</span>
<button type="button" class="btn btn-indigo btn-sm">
Generated Action
</button>يضم بوتستراب مجموعة مفاتيح منطقية تبدأ بـ $enable-* تعمل كلوحة تحكم مركزية لخصائص الإطار بالكامل، ومن أبرزها:
$enable-rounded(افتراضياًtrue): تعطيله يلغي الحواف المستديرة من جميع المكونات دفعة واحدة.$enable-shadowsو$enable-gradients(افتراضياًfalse): تفعيلهما يضيف ظلالاً ناعمة وتدرجات لونية تلقائية للأزرار والبطاقات.$enable-cssgridو$enable-negative-margins(افتراضياًfalse): لتفعيل كلاسات.gridوكلاسات الهوامش السالبة مثل.mt-n3.$enable-dark-mode(افتراضياًtrue): يمكن ضبطه علىfalseلتقليص حجم الملف إن كان المشروع فاتحاً حصراً:
<pre class="p-3 border rounded mb-0"><code>
// Before @import "variables"
$enable-rounded: true;
$enable-shadows: true;
$enable-cssgrid: true;
$enable-negative-margins: true;
$enable-reduced-motion: true;
</code></pre>يلخص الجدول المرجعي التالي مراحل وأدوات تخصيص Sass في بوتستراب 5.3:
| الأداة أو المرحلة | الموقع في custom.scss | الأثر في الحزمة المترجمة |
|---|---|---|
@import "functions" | السطر الأول دائماً | توفير دوال الألوان والتباين قبل قراءة المتغيرات |
تعديلات !default | قبل @import "variables" | إعادة حساب الهوية اللونية والخطوط والزوايا من الجذر |
variables-dark | مباشرة بعد variables | توليد اشتقاقات الوضع الداكن لهويتك المخصصة |
map-merge / map-remove | بين variables وmaps | إضافة ألوان دلالية جديدة أو حذف ألوان غير مستخدمة |
مفاتيح $enable-* | قبل variables | تفعيل .grid والهوامش السالبة والظلال أو إلغاء الحواف |
| الاستيراد الانتقائي للمكونات | بعد mixins وroot | تقليص حجم CSS باستيراد المكونات المستخدمة فقط |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس بنية ملفات SCSS المصدرية في بوتستراب 5.3، وترتيب الاستيراد الانتقائي الإلزامي شاملاً variables-dark، واستغلال راية !default وتوسيع خريطة $theme-colors والتحكم في مفاتيح $enable-* العامة.
الخطوة التالية والدرس القادم
انتقل الآن إلى الدرس الختامي للكورس «واجهة Utilities API وتحسين الأداء في بوتستراب 5» لتوليد كلاسات خدمية مخصصة وتقليص حجم CSS وJS للإطلاق الاحترافي.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Sass !default Flag راية القيمة الافتراضية !default
- راية في Sass تجعل المتغير يقبل القيمة الافتراضية للإطار فقط إذا لم يقم المطور بتعريفه مسبقاً.
- للمراجعة
- 02 Selective SCSS Import الاستيراد الانتقائي لملفات المصدر
- استيراد ملفات المكونات المطلوبة فعلياً في المشروع بدلاً من تضمين حزمة بوتستراب الكاملة.
- للمراجعة
- 03 Sass Color Map Merge دمج خرائط الألوان الدلالية
- استخدام دالة map-merge لإضافة أدوار لونية جديدة إلى خريطة $theme-colors وتوليد كلاساتها آلياً.
- للمراجعة
- 04 Global Option Flags ($enable-*) مفاتيح الخيارات العامة للإطار
- متغيرات منطقية تتحكم في تفعيل أو تعطيل ميزات كاملة مثل الحواف المستديرة والظلال وشبكة CSS Grid.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 SCSS SCSS
- Sassy Cascading Style Sheets
- صيغة أوراق الأنماط المتقدمة الداعمة للمتغيرات والخرائط والتي كُتب بها مصدر بوتستراب 5.3.
- للمراجعة
- 02 NPM NPM
- Node Package Manager
- أداة إدارة الحزم القياسية لتثبيت ملفات مصدر بوتستراب وتحديثها بأمان في المشاريع.
- للمراجعة
- 03 CLI CLI
- Command Line Interface
- أداة الطرفية المستخدمة لترجمة وضغط ملف custom.scss إلى ملف CSS نهائي جاهز للمتصفح.
- للمراجعة
- 04 CSS CSS
- Cascading Style Sheets
- مخرجات التنسيق القياسية النهائية التي يقرؤها المتصفح بعد انتهاء ترجمة Sass.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
اكتب تسلسل الاستيراد الصحيح بدءاً من functions، ثم تعديل $primary وتفعيل $enable-cssgrid: true، متبوعاً باستيراد variables ثم variables-dark ثم maps.
-
اكتب مقطع Sass الذي يعرف خريطة $custom-colors للون teal ويدمجها في $theme-colors عبر دالة map-merge قبل استيراد ملف maps.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
لماذا يُمنع تعديل ملفات SCSS مباشرة داخل مجلد node_modules/bootstrap/scss/؟
لأن أي تحديث أو إعادة تثبيت للحزمة عبر npm سيمسح مجلد node_modules بالكامل ويضيع تعديلاتك.
في ملف custom.scss الانتقائي، أين يجب وضع سطر تعديل المتغير $primary؟
يوضع بعد استيراد functions وقبل استيراد variables لكي تحترم راية !default قيمتك الجديدة.
ما الملف المصدري المضاف في بوتستراب 5.3 والواجب استيراده مباشرة بعد _variables.scss لدعم الوضع الداكن؟
أضاف الإصدار 5.3 ملف variables-dark لاشتقاق ألوان الوضع الداكن ويلزم استيراده عقب variables.
هل تكون كلاسات الهوامش السالبة مفعلة افتراضياً في بوتستراب 5 دون تغيير مفتاح $enable-negative-margins؟
خطأ؛ تكون قيمتها الافتراضية false ويلزم تفعيل $enable-negative-margins: true وقت البناء لتوليدها.
أي دالة في Sass تضيف لوناً جديداً إلى خريطة $theme-colors بأمان دون مسح الألوان القياسية الموجودة؟
تدمج دالة map-merge الخريطة المخصصة داخل خريطة $theme-colors الأصلية مع الحفاظ على عناصرها.
هل يجب تنفيذ دمج $theme-colors عبر map-merge قبل استيراد ملف bootstrap/scss/maps؟
صحيح؛ لأن ملف maps يشتق خرائط قنوات RGB والدرجات الناعمة بناءً على محتويات $theme-colors.
ماذا يحدث لجميع الأزرار والبطاقات وحقول الإدخال عند ضبط الخيار العام $enable-rounded: false;؟
تُزال خصائص استدارة الحواف الافتراضية عن كافة مكونات الإطار لتظهر بزوايا قائمة حادة.
أي دالة في Sass تُستخدم لحذف لون غير مستخدم مثل "info" من خريطة $theme-colors لتصغير حجم CSS؟
تحذف دالة map-remove المفاتيح المحددة من الخريطة فلا تتولد كلاساتها في الملف المترجم.