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;
}

Компонентни променливи

Bootstrap 5 се повеќе ги користи сопствените својства како локални променливи за различни компоненти. На овој начин го намалуваме нашиот компајлиран CSS, осигуруваме дека стиловите не се наследуваат на места како вгнездени табели и дозволуваме некои основни рестилирање и проширување на компонентите на Bootstrap по компилацијата Sass.

Погледнете ја документацијата на нашата табела за малку увид во тоа како ги користиме CSS променливите . Нашите ленти за навигација користат и CSS променливи од v5.2.0. Ние, исто така, користиме CSS променливи низ нашите мрежи - првенствено за олуци, новата CSS мрежа за пријавување - со поголема употреба на компоненти во иднина.

Секогаш кога е можно, ќе доделуваме CSS променливи на ниво на основната компонента (на пр., .navbarза 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()променливи. Проверете го овој одговор на Stack Overflow за некои корисни врски. Во меѓувреме, можете да ги користите овие променливи во други CSS ситуации, како и во вашиот JavaScript.