متغیرهای CSS

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

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

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

در اینجا متغیرهایی هستند که ما اضافه می‌کنیم (توجه داشته باشید که :rootلازم است) که در هر جایی که CSS Bootstrap بارگیری می‌شود قابل دسترسی است. آنها در _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-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-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --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-bg: #fff;
  --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-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

متغیرهای جزء

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

برای آگاهی از نحوه استفاده از متغیرهای CSS، به مستندات جدول ما نگاهی بیندازید . نوارهای ناوبری ما نیز از متغیرهای CSS از نسخه 5.2.0 استفاده می کنند. ما همچنین از متغیرهای CSS در سراسر شبکه‌های خود استفاده می‌کنیم - عمدتاً برای ناودان‌ها، شبکه انتخابی جدید CSS - با استفاده از اجزای بیشتر در آینده.

در صورت امکان، متغیرهای CSS را در سطح مؤلفه پایه (مثلاً .navbarبرای نوار ناوبری و اجزای فرعی آن) اختصاص می دهیم. این کار حدس زدن مکان و نحوه سفارشی‌سازی را کاهش می‌دهد و امکان تغییرات آسان توسط تیم ما در به‌روزرسانی‌های آینده را فراهم می‌کند.

پیشوند

اکثر متغیرهای CSS از یک پیشوند برای جلوگیری از برخورد با پایگاه کد خود استفاده می کنند. این پیشوند علاوه بر پیشوندی است --که در هر متغیر CSS مورد نیاز است.

پیشوند را از طریق $prefixمتغیر Sass سفارشی کنید. به‌طور پیش‌فرض، روی bs-(به خط تیره آخر توجه کنید) تنظیم شده است.

مثال ها

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

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

نقاط شکست شبکه

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