CSS variables

Ang Bootstrap naglakip sa duolan sa duha ka dosena nga CSS custom properties (variables) sa iyang compiled CSS, uban sa dosena pa sa dalan alang sa mas maayo nga customization sa kada-component nga basehan. Naghatag kini og dali nga pag-access sa kasagarang gigamit nga mga kantidad sama sa among mga kolor sa tema, mga breakpoint, ug panguna nga mga stack sa font kung nagtrabaho sa inspektor sa imong browser, usa ka code sandbox, o kinatibuk-ang prototyping.

Ang tanan namon nga naandan nga mga kabtangan gi-prefixbs- aron malikayan ang mga panagsumpaki sa ikatulo nga partido nga CSS.

Root variables

Ania ang mga variable nga among gilakip (timan-i nga ang :rootgikinahanglan) nga mahimong ma-access bisan asa ang Bootstrap's CSS gikarga. Naa sila sa among _root.scssfile ug gilakip sa among gihugpong nga mga 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 nga sangkap

Nagsugod usab kami sa paggamit sa naandan nga mga kabtangan ingon mga lokal nga variable alang sa lainlaing mga sangkap. Niining paagiha mamenosan namo ang among gihugpong nga CSS, pagsiguro nga ang mga estilo dili mapanunod sa mga lugar sama sa mga nested table, ug tugotan ang pipila ka batakang restyling ug pagpalapad sa mga sangkap sa Bootstrap human sa paghugpong sa Sass.

Tan-awa ang among dokumentasyon sa lamesa para sa pipila ka pagsabot kung giunsa namo paggamit ang mga variable sa CSS .

Gigamit usab namo ang mga variable sa CSS sa among mga grids—labi na alang sa mga kanal-nga adunay dugang nga paggamit sa component nga moabut sa umaabot.

Mga pananglitan

Ang mga variable sa CSS nagtanyag parehas nga kadali sa mga variable ni Sass, apan wala kinahanglana ang pagtipon sa wala pa i-serve sa browser. Pananglitan, dinhi among gi-reset ang font sa among panid ug mga istilo sa link nga adunay mga variable nga CSS.

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