ЦСС променљиве

Боотстрап укључује многа ЦСС прилагођена својства (варијабле) у свом преведеном ЦСС-у за прилагођавање у реалном времену без потребе за поновним компајлирањем Сасс-а. Они омогућавају лак приступ често коришћеним вредностима као што су наше боје теме, тачке прекида и примарни скупови фонтова када радите у инспектору вашег претраживача, заштићеном окружењу кода или општем прототипу.

Сва наша прилагођена својства имају префиксbs- да би се избегли сукоби са ЦСС-ом треће стране.

Коријенске варијабле

Ево променљивих које укључујемо (имајте на уму да :rootје обавезна) којима се може приступити било где да се учита Боотстрап-ов ЦСС. Они се налазе у нашој _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;
}

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

Такође почињемо да користимо прилагођена својства као локалне променљиве за различите компоненте. На овај начин можемо да смањимо наш преведени ЦСС, да обезбедимо да стилови нису наслеђени на местима као што су угнежђене табеле и да дозволимо неко основно рестилизовање и проширење Боотстрап компоненти након Сасс компилације.

Погледајте нашу табелу документацију за увид у то како користимо ЦСС променљиве .

Такође користимо ЦСС променљиве у нашим мрежама – првенствено за олуке – са већом употребом компоненти у будућности.

Примери

ЦСС променљиве нуде сличну флексибилност као и Сасс-ове варијабле, али без потребе за компилацијом пре него што се сервирају у претраживач. На пример, овде ресетујемо фонт и стилове везе на нашој страници помоћу ЦСС променљивих.

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

Преломне тачке мреже

Иако наше тачке прекида у мрежи укључујемо као ЦСС променљиве (осим за xs), имајте на уму да ЦСС променљиве не функционишу у медијским упитима . Ово је дизајнирано у ЦСС спецификацији за варијабле, али се може променити у наредним годинама уз подршку за env()варијабле. Погледајте овај одговор на преклапање стека за неке корисне везе. У међувремену, ове варијабле можете користити у другим ЦСС ситуацијама, као иу свом ЈаваСцрипт-у.