CSS-muuttujat

Bootstrap sisältää monia mukautettuja CSS-ominaisuuksia (muuttujia) käännettyyn CSS:ään reaaliaikaista mukauttamista varten ilman, että Sassia tarvitsee kääntää uudelleen. Nämä tarjoavat helpon pääsyn yleisesti käytettyihin arvoihin, kuten teemaväreihin, keskeytyspisteisiin ja ensisijaisiin kirjasinpinoihin, kun työskentelet selaimesi tarkastajassa, koodihiekkalaatikossa tai yleisessä prototyypeissä.

Kaikki mukautetut ominaisuudet ovat etuliitteenä,bs- jotta vältetään ristiriidat kolmannen osapuolen CSS:n kanssa.

Juurimuuttujat

Tässä ovat sisällyttämämme muuttujat (huomaa, että se :rooton pakollinen), joita voidaan käyttää missä tahansa Bootstrapin CSS-tiedosto on ladattu. Ne sijaitsevat _root.scsstiedostossamme ja sisältyvät käännettyihin dist-tiedostoihimme.

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

Komponenttimuuttujat

Bootstrap 5 käyttää yhä enemmän mukautettuja ominaisuuksia paikallisina muuttujina eri komponenteille. Tällä tavalla vähennämme käännettyä CSS:ää, varmistamme, että tyylit eivät periydy sellaisissa paikoissa, kuten sisäkkäisissä taulukoissa, ja sallimme Bootstrap-komponenttien perusmuotoilun ja laajentamisen Sass-käännöksen jälkeen.

Katso taulukkodokumentaatiomme saadaksesi käsityksen siitä, kuinka käytämme CSS-muuttujia . Navigointipalkissamme käytetään myös CSS-muuttujia versiosta 5.2.0 alkaen. Käytämme myös CSS-muuttujia ruudukoissamme – ensisijaisesti kouruille, uusi opt-in CSS-ruudukko – ja komponenttien käyttöä tulee lisää tulevaisuudessa.

Aina kun mahdollista, määritämme CSS-muuttujat peruskomponenttitasolla (esim .navbar. navigointipalkin ja sen alikomponenttien osalta). Tämä vähentää arvailua siitä, missä ja miten mukauttaa, ja mahdollistaa tiimimme helpon muokkauksen tulevissa päivityksissä.

Etuliite

Useimmat CSS-muuttujat käyttävät etuliitettä välttääkseen törmäykset oman koodikannan kanssa. Tämä etuliite on sen lisäksi, --joka vaaditaan jokaisessa CSS-muuttujassa.

Customize the prefix via the $prefix Sass variable. By default, it’s set to bs- (note the trailing dash).

Examples

CSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser. For example, here we’re resetting our page’s font and link styles with CSS variables.

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

Grid breakpoints

While we include our grid breakpoints as CSS variables (except for xs), be aware that CSS variables do not work in media queries. This is by design in the CSS spec for variables, but may change in coming years with support for env() variables. Check out this Stack Overflow answer for some helpful links. In the meantime, you can use these variables in other CSS situations, as well as in your JavaScript.