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

Runtime CSS Customization التخصيص الحي بدون بناء Sass

خصّص واجهات بوتستراب 5.3 مباشرة في المتصفح عبر متغيرات CSS القياسية، بدءاً من متغيرات الجذر وقنوات RGB والمتغيرات المحلية للمكونات والشبكة وصولاً لقواعد التخصيص النظيف.
3 صفوف تعليمية
بوتستراب 5
1 مشاهدة

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

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

في الماضي كان تغيير لون زر أو تعديل نصف قطر زوايا بطاقة في بوتستراب يضعك أمام خيارين كلاهما مرهق: إما تثبيت بيئة بناء Sass وإعادة ترجمة الحزمة كلها، وإما كتابة محددات CSS معقدة مثقلة بكلمة !important. حلّ بوتستراب 5.2 و5.3 هذه المعضلة بتحويل معظم قيم الإطار ومكوناته إلى متغيرات CSS قياسية CSS Custom Properties تفهمها المتصفحات مباشرة في وقت التشغيل.

بفضل هذه الهندسة الحديثة يمكنك تحميل ملف bootstrap.min.css الجاهز كما هو، ثم إضافة بضعة أسطر نظيفة تغير متغيرات --bs-* على الصفحة أو على قسم بعينه أو حتى ديناميكياً بجافاسكريبت دون أي خطوة ترجمة مسبقة!

الصف 2 صورة توضيحية
الشكل 1: الطبقات الأربع لمتغيرات CSS الحية من جذر المستند حتى نطاق المكوّن المفرد.
مخطط مستويات متغيرات CSS الجذرية والمحلية وقنوات RGB في بوتستراب 5.3
مخطط مستويات متغيرات CSS الجذرية والمحلية وقنوات RGB في بوتستراب 5.3
الصف 3 ملاحظة هامة