انتقل إلى محتوى الدرس

Bootstrap SCSS Structure بنية ملفات المصدر SCSS

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

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

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

بينما تمنحك متغيرات CSS الحية تعديلات سريعة في المتصفح، يفتح لك تخصيص ملفات المصدر SCSS الباب الأوسع لإعادة هندسة بوتستراب 5.3 بالكامل وقت البناء: من تغيير نظام الخطوط والألوان الجذرية وتوليد كافة المكونات تلقائياً بها، إلى تفعيل ميزات معطلة افتراضياً واستبعاد المكونات غير المستخدمة نهائياً من الحزمة.

عند تثبيت الحزمة عبر npm install bootstrap ستجد مجلد scss/ مقسماً بنظام معياري نظيف. القاعدة المعمارية الصارمة هي عدم لمس أي ملف داخل مجلد node_modules إطلاقاً؛ لأن أي تحديث قادم للحزمة سيمحو تعديلاتك، وبدلاً من ذلك ننشئ ملفاً خاصاً بالمشروع مثل scss/custom.scss يستورد ما نحتاجه ويعيد ضبط المتغيرات بأمان.

الصف 2 صورة توضيحية
الشكل 1: التسلسل الهندسي لبناء حزمة Bootstrap 5.3 مخصصة ورشيقة من مصدر Sass.
مخطط خطوات وترتيب استيراد وتخصيص ملفات Sass في بوتستراب 5.3
مخطط خطوات وترتيب استيراد وتخصيص ملفات Sass في بوتستراب 5.3
الصف 3 ملاحظة هامة