توسيع خرائط الألوان الدلالية | تخصيص Sass والخيارات في بوتستراب 5

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

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

ماذا لو احتجت لإضافة لون تاسع جديد كلياً للوحة الدلالية ليولد له بوتستراب كلاسات .btn-indigo و.alert-indigo و.text-bg-indigo تلقائياً؟ يتم ذلك بتعديل خريطة $theme-colors باستخدام دالة map-merge() بعد استيراد variables وقبل استيراد ملف maps!

وبنفس السهولة يمكنك تقليص حجم CSS بحذف لون دلالي لا يستخدمه مشروعك عبر دالة map-remove($theme-colors, "info", "light") فيتوقف الإطار عن توليد عشرات الكلاسات المرتبطة به.

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

HTML

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

جرّب بنفسك

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

Modifying Sass Color Maps توسيع خرائط الألوان الدلالية

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

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