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.

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

Mga variable ng bahagi

Ang Bootstrap 5 ay lalong gumagamit ng mga custom na katangian bilang mga lokal na variable para sa iba't ibang bahagi. Sa ganitong paraan, binabawasan namin ang aming pinagsama-samang CSS, tinitiyak na ang mga istilo ay hindi minana sa mga lugar tulad ng mga nested table, at pinapayagan 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 ang aming mga navbar ng mga variable ng CSS mula sa v5.2.0. Gumagamit din kami ng mga variable ng CSS sa aming mga grid—pangunahin para sa mga gutter ang bagong opt-in CSS grid —na may higit pang paggamit ng bahagi na darating sa hinaharap.

Hangga't maaari, magtatalaga kami ng mga variable ng CSS sa antas ng batayang bahagi (hal., .navbarpara sa navbar at mga sub-bahagi nito). Binabawasan nito ang paghula sa kung saan at kung paano i-customize, at nagbibigay-daan para sa madaling pagbabago ng aming team sa mga update sa hinaharap.

Prefix

Karamihan sa mga variable ng CSS ay gumagamit ng prefix upang maiwasan ang mga banggaan sa iyong sariling codebase. Ang prefix na ito ay karagdagan sa --kinakailangan sa bawat variable ng CSS.

I-customize ang prefix sa pamamagitan ng $prefixSass variable. Bilang default, nakatakda ito sa bs-(tandaan ang trailing dash).

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.