ترتيب استيراد ملفات Sass | تخصيص Sass والخيارات في بوتستراب 5

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

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

عندما تختار الاستيراد الانتقائي للمكونات بدلاً من استيراد ملف bootstrap.scss الكامل، يجب احترام الترتيب المنطقي لاعتمادية الملفات حتى لا يفشل المترجم:

استورد functions أولاً لتتوفر دوال حساب التباين والألوان مثل tint-color().
اكتب تعديلات متغيرات مشروعك المخصصة هنا (مثل $primary).
استورد variables ثم variables-dark (المضاف في 5.3 للوضع الداكن!).
استورد maps ثم mixins ثم utilities.
استورد القاعدة الأساسية (root, reboot, type) ثم المكونات التي يستخدمها موقعك فقط، واختم بملف utilities/api لتوليد الكلاسات الخدمية.

الصف 2 كود برمجي

HTML

<!-- 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>

جرّب بنفسك

الصف 3 ملاحظة هامة

Selective Sass Import Order ترتيب استيراد ملفات Sass

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

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