متغيرات CSS

يتضمن Bootstrap حوالي عشرين من خصائص CSS المخصصة (المتغيرات) في CSS المترجمة ، مع عشرات أخرى في الطريق لتحسين التخصيص على أساس كل مكون. يوفر ذلك وصولاً سهلاً إلى القيم شائعة الاستخدام مثل ألوان السمات ونقاط التوقف ومجموعات الخطوط الأساسية عند العمل في فاحص المتصفح أو صندوق حماية الكود أو النماذج الأولية العامة.

جميع خصائصنا المخصصة مسبوقة بـbs- لتجنب التعارض مع CSS لجهة خارجية.

متغيرات الجذر

فيما يلي المتغيرات التي نقوم بتضمينها (لاحظ أن :rootالمطلوب) التي يمكن الوصول إليها في أي مكان يتم فيه تحميل CSS الخاص بـ Bootstrap. إنها موجودة في _root.scssملفنا ومضمنة في ملفات dist المجمعة لدينا.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

متغيرات المكون

لقد بدأنا أيضًا في الاستفادة من الخصائص المخصصة كمتغيرات محلية لمكونات مختلفة. بهذه الطريقة يمكننا تقليل CSS المترجمة لدينا ، والتأكد من عدم وراثة الأنماط في أماكن مثل الجداول المتداخلة ، والسماح ببعض عمليات إعادة التصميم الأساسية وتوسيع مكونات Bootstrap بعد تجميع Sass.

ألق نظرة على وثائق الجدول الخاصة بنا للحصول على بعض الأفكار حول كيفية استخدامنا لمتغيرات CSS .

نحن نستخدم أيضًا متغيرات CSS عبر شبكاتنا - بشكل أساسي للمزاريب - مع استخدام المزيد من المكونات في المستقبل.

أمثلة

توفر متغيرات CSS مرونة مماثلة لمتغيرات Sass ، ولكن دون الحاجة إلى التجميع قبل تقديمها إلى المتصفح. على سبيل المثال ، نقوم هنا بإعادة تعيين أنماط الخط والارتباط الخاصة بصفحتنا باستخدام متغيرات CSS.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}