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

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

Сва наша прилагођена својства имају префикс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-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));
}

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

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

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

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

Примери

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

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