CSS променливи

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

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

Разгледайте нашата документация за таблици за известна представа как използваме CSS променливи .

Ние също така използваме CSS променливи в нашите мрежи — основно за улуци — с повече използване на компоненти в бъдеще.

Примери

CSS променливите предлагат подобна гъвкавост като променливите на Sass, но без необходимост от компилация, преди да бъдат сервирани в браузъра. Например, тук нулираме шрифта на нашата страница и стиловете на връзките с CSS променливи.

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