متغیرهای CSS

بوت استرپ شامل حدود دوجین ویژگی (متغیر) سفارشی CSS در CSS کامپایل شده خود است و ده ها مورد دیگر برای سفارشی سازی بهبود یافته بر اساس هر جزء در راه است. اینها هنگام کار در بازرس مرورگرتان، جعبه ماسه‌ای کد یا نمونه‌سازی عمومی، دسترسی آسان به مقادیر رایج مانند رنگ‌های طرح زمینه، نقاط شکست، و پشته‌های قلم اصلی ما را فراهم می‌کنند.

bs-برای جلوگیری از درگیری با CSS شخص ثالث ، پیشوند تمام ویژگی های سفارشی ما وجود دارد.

متغیرهای ریشه

در اینجا متغیرهایی هستند که ما اضافه می‌کنیم (توجه داشته باشید که :rootالزامی است) که در هر جایی که CSS بوت استرپ بارگذاری می‌شود قابل دسترسی است. آنها در _root.scssفایل ما قرار دارند و در فایل های دور کامپایل شده ما گنجانده شده اند.

: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 کامپایل‌شده خود را کاهش دهیم، اطمینان حاصل کنیم که استایل‌ها در مکان‌هایی مانند جداول تودرتو به ارث نمی‌رسند، و اجازه می‌دهیم تا پس از کامپایل‌سازی Sass، برخی از سبک‌های اولیه و گسترش اجزای Bootstrap را گسترش دهیم.

برای آگاهی از نحوه استفاده از متغیرهای CSS، به مستندات جدول ما نگاهی بیندازید .

ما همچنین از متغیرهای CSS در سراسر شبکه های خود استفاده می کنیم - در درجه اول برای ناودان ها - با استفاده از اجزای بیشتر در آینده.

مثال ها

متغیرهای CSS انعطاف پذیری مشابهی با متغیرهای Sass ارائه می دهند، اما بدون نیاز به کامپایل قبل از ارائه به مرورگر. به عنوان مثال، در اینجا ما فونت و سبک های پیوند صفحه خود را با متغیرهای CSS بازنشانی می کنیم.

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