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-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.