Mga variable ng CSS

Kasama sa Bootstrap ang humigit-kumulang dalawang dosenang mga custom na katangian ng CSS (mga variable) sa pinagsama-samang CSS nito, na may dose-dosenang higit pa sa daan para sa pinahusay na pag-customize sa bawat bahagi. 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.

Naka-prefix ang lahat ng aming custom na propertybs- 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-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));
}

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