Skip to main content Skip to docs navigation
مشاهدة على الـ GitHub

متغيرات الـ (CSS)

استخدم خصائص CSS المخصصة في الـ Bootstrap من أجل تصميم وتطوير سريع ومستقبلي.

في هذه الصفحة

تتضمن الـ Bootstrap العديد من خصائص CSS المخصصة (المتغيرات) في ملفات CSS المجمعة الخاصة بها للتخصيص في الوقت الفعلي دون الحاجة إلى إعادة تجميع الـ Sass. توفر هذه الخصائص وصولاً سهلاً إلى القيم الشائعة الاستخدام مثل ألوان السمة، ونقاط التوقف (breakpoints)، ومجموعات الخطوط الأساسية عند العمل في مفتش المتصفح (browser’s inspector)، أو بيئة تجربة الأكواد (code sandbox)، أو النمذجة العامة.

جميع الخصائص المخصصة لدينا تبدأ بالبادئة bs- لتجنب التعارضات مع ملفات CSS الخاصة بأطراف ثالثة.

متغيرات الجذر (Root variables)

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

الإفتراضي

هذه المتغيرات الخاصة بـ CSS متاحة في كل مكان، بغض النظر عن وضع الألوان.

:root,
[data-bs-theme=light] {
  --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-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --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-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, 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));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-heading-color: inherit;
  --bs-link-color: #0d6efd;
  --bs-link-color-rgb: 13, 110, 253;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #0a58ca;
  --bs-link-hover-color-rgb: 10, 88, 202;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;
}

الوضع الداكن

هذه المتغيرات مخصصة لوضع الداكن المدمج لدينا.

[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-color: #dee2e6;
  --bs-body-color-rgb: 222, 226, 230;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(222, 226, 230, 0.75);
  --bs-secondary-color-rgb: 222, 226, 230;
  --bs-secondary-bg: #343a40;
  --bs-secondary-bg-rgb: 52, 58, 64;
  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
  --bs-tertiary-color-rgb: 222, 226, 230;
  --bs-tertiary-bg: #2b3035;
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary-text-emphasis: #6ea8fe;
  --bs-secondary-text-emphasis: #a7acb1;
  --bs-success-text-emphasis: #75b798;
  --bs-info-text-emphasis: #6edff6;
  --bs-warning-text-emphasis: #ffda6a;
  --bs-danger-text-emphasis: #ea868f;
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: #031633;
  --bs-secondary-bg-subtle: #161719;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: #084298;
  --bs-secondary-border-subtle: #41464b;
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #087990;
  --bs-warning-border-subtle: #997404;
  --bs-danger-border-subtle: #842029;
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-heading-color: inherit;
  --bs-link-color: #6ea8fe;
  --bs-link-hover-color: #8bb9fe;
  --bs-link-color-rgb: 110, 168, 254;
  --bs-link-hover-color-rgb: 139, 185, 254;
  --bs-code-color: #e685b5;
  --bs-highlight-color: #dee2e6;
  --bs-highlight-bg: #664d03;
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
}

متغيرات المكونات (Component variables)

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

ألقِ نظرة على مستندات الجداول للحصول على بعض الرؤى حول كيفية استخدامنا لمتغيرات CSS. كما تستخدم أشرطة التنقل (navbars) لدينا أيضاً متغيرات CSS بدءاً من الإصدار v5.2.0. نحن نستخدم أيضاً متغيرات CSS عبر الشبكات (grids) الخاصة بنا — بشكل أساسي للفراغات الفاصلة (gutters) في شبكة CSS الجديدة الاختيارية — مع المزيد من استخدامات المكونات في المستقبل.

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

البادئة (Prefix)

تستخدم معظم متغيرات CSS بادئة لتجنب التصادم مع قاعدة الأكواد الخاصة بك. هذه البادئة تأتي بالإضافة إلى -- المطلوبة في كل متغير CSS.

قم بتخصيص البادئة عبر متغير الـ Sass الذي يسمى $prefix. بشكل افتراضي، يتم تعيينها على bs- (لاحظ الشرطة في النهاية).

أمثلة

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

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

متغيرات التركيز (Focus variables)

تمت الإضافة في الإصدار v5.3.0

توفر الـ Bootstrap أنماط :focus مخصصة باستخدام مزيج من متغيرات Sass وCSS التي يمكن إضافتها اختيارياً إلى مكونات وعناصر محددة. نحن لا نقوم حالياً بتجاوز جميع أنماط :focus بشكل عام.

في الـ Sass الخاص بنا، نقوم بتعيين قيم افتراضية يمكن تخصيصها قبل التجميع.

scss/_variables.scss 
$focus-ring-width:      .25rem;
$focus-ring-opacity:    .25;
$focus-ring-color:      rgba($primary, $focus-ring-opacity);
$focus-ring-blur:       0;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;

يتم بعد ذلك إعادة تعيين تلك المتغيرات إلى متغيرات CSS على مستوى :root والتي يمكن تخصيصها في الوقت الفعلي، بما في ذلك خيارات الإزاحة x و y (والتي تعود إلى قيمتها الاحتياطية الافتراضية 0).

scss/_root.scss 
--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};

نقاط توقف الشبكة (Grid breakpoints)

بينما نقوم بتضمين نقاط توقف الشبكة الخاصة بنا كمتغيرات CSS (باستثناء xs)، يرجى العلم أن متغيرات CSS لا تعمل في استعلامات الوسائط (media queries). هذا الأمر مقصود في مواصفات CSS للمتغيرات، ولكن قد يتغير في السنوات القادمة مع دعم متغيرات env(). تحقق من إجابة Stack Overflow هذه للحصول على بعض الروابط المفيدة. في هذه الأثناء، يمكنك استخدام هذه المتغيرات في حالات CSS الأخرى، وكذلك في الـ JavaScript الخاص بك.