انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #5 من درس: تخصيص Sass والخيارات في بوتستراب 5

Global Sass Option Flags مفاتيح الخيارات العامة للإطار

خصّص بوتستراب 5.3 من جذوره عبر ملفات SCSS المصدرية باتباع هيكل custom.scss النظيف وترتيب الاستيراد الإلزامي وتعديل متغيرات !default وتوسيع خرائط الألوان ومفاتيح الخيارات العامة.
6 صفوف تعليمية
بوتستراب 5
1 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يضم بوتستراب مجموعة مفاتيح منطقية تبدأ بـ $enable-* تعمل كلوحة تحكم مركزية لخصائص الإطار بالكامل، ومن أبرزها:

  • $enable-rounded (افتراضياً true): تعطيله يلغي الحواف المستديرة من جميع المكونات دفعة واحدة.
  • $enable-shadows و$enable-gradients (افتراضياً false): تفعيلهما يضيف ظلالاً ناعمة وتدرجات لونية تلقائية للأزرار والبطاقات.
  • $enable-cssgrid و$enable-negative-margins (افتراضياً false): لتفعيل كلاسات .grid وكلاسات الهوامش السالبة مثل .mt-n3.
  • $enable-dark-mode (افتراضياً true): يمكن ضبطه على false لتقليص حجم الملف إن كان المشروع فاتحاً حصراً:
الصف 2 كود برمجي
HTML 
<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>
جرّب بنفسك
الصف 3 ملاحظة هامة
الصف 4 ملاحظة هامة
الصف 5 شرح توضيحي

يلخص الجدول المرجعي التالي مراحل وأدوات تخصيص 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 باستيراد المكونات المستخدمة فقط
الصف 6 ملاحظة هامة
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

ملخص الدرس: أتقنت في هذا الدرس بنية ملفات SCSS المصدرية في بوتستراب 5.3، وترتيب الاستيراد الانتقائي الإلزامي شاملاً variables-dark، واستغلال راية !default وتوسيع خريطة $theme-colors والتحكم في مفاتيح $enable-* العامة.

الخطوة التالية والدرس القادم

انتقل الآن إلى الدرس الختامي للكورس «واجهة Utilities API وتحسين الأداء في بوتستراب 5» لتوليد كلاسات خدمية مخصصة وتقليص حجم CSS وJS للإطلاق الاحترافي.

جميع فقرات هذا الدرس (تخصيص Sass والخيارات في بوتستراب 5)