Mga variable ng CSS

Kasama sa Bootstrap ang maraming custom na katangian ng CSS (mga variable) sa pinagsama-samang CSS nito para sa real-time na pag-customize nang hindi na kailangang muling i-compile ang Sass. Nagbibigay ang mga ito ng madaling pag-access sa mga karaniwang ginagamit na value tulad ng aming mga kulay ng tema, breakpoint, at pangunahing font stack kapag nagtatrabaho sa inspector ng iyong browser, isang code sandbox, o pangkalahatang prototyping.

Ang lahat ng aming custom na property ay may prefixbs- na para maiwasan ang mga salungatan sa third party na CSS.

Mga variable ng ugat

Narito ang mga variable na isinama namin (tandaan na :rootkinakailangan) na maaaring ma-access kahit saan na-load ang CSS ng Bootstrap. Matatagpuan ang mga ito sa aming _root.scssfile at kasama sa aming pinagsama-samang mga dist file.

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

Mga variable ng bahagi

Nagsisimula na rin kaming gumamit ng mga custom na property bilang mga lokal na variable para sa iba't ibang bahagi. Sa ganitong paraan maaari naming bawasan ang aming pinagsama-samang CSS, matiyak na ang mga estilo ay hindi minana sa mga lugar tulad ng mga nested na talahanayan, at payagan ang ilang pangunahing restyling at pagpapalawak ng mga bahagi ng Bootstrap pagkatapos ng Sass compilation.

Tingnan ang aming dokumentasyon ng talahanayan para sa ilang pananaw sa kung paano namin ginagamit ang mga variable ng CSS .

Gumagamit din kami ng mga variable ng CSS sa aming mga grid—pangunahin para sa mga gutter—na may higit pang paggamit ng bahagi na darating sa hinaharap.

Mga halimbawa

Nag-aalok ang mga variable ng CSS ng katulad na kakayahang umangkop sa mga variable ni Sass, ngunit hindi nangangailangan ng compilation bago ihatid sa browser. Halimbawa, dito nire-reset namin ang font ng aming page at mga istilo ng link na may mga variable ng CSS.

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

Mga breakpoint ng grid

Habang isinasama namin ang aming mga grid breakpoint bilang mga variable ng CSS (maliban sa xs), magkaroon ng kamalayan na ang mga variable ng CSS ay hindi gumagana sa mga query sa media . Ito ay ayon sa disenyo sa CSS spec para sa mga variable, ngunit maaaring magbago sa mga darating na taon na may suporta para sa mga env()variable. Tingnan ang sagot na ito sa Stack Overflow para sa ilang kapaki-pakinabang na link. Pansamantala, maaari mong gamitin ang mga variable na ito sa ibang mga sitwasyon ng CSS, gayundin sa iyong JavaScript.