CSS променливи

Bootstrap включва много CSS персонализирани свойства (променливи) в своя компилиран CSS за персонализиране в реално време без необходимост от повторно компилиране на Sass. Те осигуряват лесен достъп до често използвани стойности като нашите цветове на темата, точки на прекъсване и стекове от основни шрифтове, когато работите в инспектора на браузъра си, пясъчна среда на код или общо прототипиране.

Всички наши персонализирани свойства са с префикс, за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-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, да гарантираме, че стиловете не се наследяват на места като вложени таблици и да позволим някои основни промени в стила и разширяване на компонентите на Bootstrap след компилация на Sass.

Разгледайте нашата документация за таблици за известна представа как използваме 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()променливи. Вижте този отговор на Stack Overflow за някои полезни връзки. Междувременно можете да използвате тези променливи в други CSS ситуации, както и във вашия JavaScript.