تعديل ألوان ومتغيرات الهوية | تخصيص Sass والخيارات في بوتستراب 5

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

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

تُكتب كل متغيرات بوتستراب الداخلية متبوعة بالراية الذكية !default مثل $primary: $blue !default;. تعني هذه الراية لمترجم Sass: «اعتمد اللون الأزرق فقط إذا لم يكن المطور قد عرّف قيمة سابقة لمتغير $primary».

وهذا يفسر لماذا نضع متغيراتنا المخصصة قبل استيراد ملف variables! فبمجرد كتابة $primary: #6f42c1; و$border-radius: 0.75rem; في الأعلى، يتجاهل بوتستراب قيمته الافتراضية ويشتق تلقائياً جميع درجات subtle وemphasis وألوان الأزرار وحلقات التركيز من لونك الجديد دفعة واحدة.

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

HTML

<!-- SCSS before @import "variables":
  $primary: #6f42c1;
  $border-radius: 0.9rem;
-->
<div class="compiled-demo p-3 border rounded bg-body">
  <button type="button" class="btn btn-primary">
    Recompiled Brand Button
  </button>
</div>

جرّب بنفسك

الصف 3 معاينة حية

Overriding Sass Defaults تعديل ألوان ومتغيرات الهوية

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

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