متغیرهای CSS
از ویژگی های سفارشی CSS Bootstrap برای طراحی و توسعه سریع و آینده نگر استفاده کنید.
Bootstrap شامل بسیاری از ویژگی های سفارشی CSS (متغیرها) در CSS کامپایل شده خود برای سفارشی سازی بلادرنگ بدون نیاز به کامپایل مجدد Sass است. اینها هنگام کار در بازرس مرورگر شما، جعبه ایمنی کد یا نمونهسازی عمومی، دسترسی آسان به مقادیر رایج مانند رنگهای طرح زمینه، نقاط شکست، و پشتههای فونت اصلی ما را فراهم میکنند.
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-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", 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));
--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;
}
متغیرهای جزء
ما همچنین شروع به استفاده از ویژگی های سفارشی به عنوان متغیرهای محلی برای اجزای مختلف کرده ایم. به این ترتیب میتوانیم CSS کامپایلشده خود را کاهش دهیم، اطمینان حاصل کنیم که استایلها در مکانهایی مانند جداول تودرتو به ارث نمیروند، و اجازه میدهیم تا بعد از کامپایلسازی Sass، برخی از سبکهای اولیه و گسترش اجزای Bootstrap را گسترش دهیم.
برای آگاهی از نحوه استفاده از متغیرهای CSS، به مستندات جدول ما نگاهی بیندازید .
ما همچنین از متغیرهای CSS در سراسر شبکه های خود استفاده می کنیم - در درجه اول برای ناودان ها - با استفاده از اجزای بیشتر در آینده.
مثال ها
متغیرهای CSS انعطاف پذیری مشابهی با متغیرهای Sass ارائه می دهند، اما بدون نیاز به کامپایل قبل از ارائه به مرورگر. به عنوان مثال، در اینجا ما فونت و سبک های پیوند صفحه خود را با متغیرهای CSS بازنشانی می کنیم.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
نقاط شکست شبکه
در حالی که ما نقاط شکست شبکه خود را به عنوان متغیرهای CSS درج می کنیم (به جز برای xs
)، توجه داشته باشید که متغیرهای CSS در جستارهای رسانه کار نمی کنند . این با طراحی در مشخصات CSS برای متغیرها است، اما ممکن است در سال های آینده با پشتیبانی از env()
متغیرها تغییر کند. برای دریافت برخی پیوندهای مفید ، این پاسخ سرریز پشته را بررسی کنید . در عین حال، می توانید از این متغیرها در موقعیت های دیگر CSS و همچنین در جاوا اسکریپت خود استفاده کنید.