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

Komponenttimuuttujat

Olemme myös alkaneet käyttää mukautettuja ominaisuuksia paikallisina muuttujina eri komponenteille. Tällä tavalla voimme vähentää käännettyämme CSS:ää, varmistaa, että tyylit eivät periyty paikoissa, kuten sisäkkäisissä taulukoissa, ja sallia Bootstrap-komponenttien perusmuotoilun ja laajentamisen Sass-kääntämisen jälkeen.

Katso taulukkodokumentaatiomme saadaksesi käsityksen siitä, kuinka käytämme CSS-muuttujia .

Käytämme myös CSS-muuttujia ruudukoissamme – ensisijaisesti vesikouruille – ja komponenttien käyttöä tulee lisää tulevaisuudessa.

Esimerkkejä

CSS-muuttujat tarjoavat samanlaista joustavuutta kuin Sassin muuttujat, mutta niitä ei tarvitse kääntää ennen kuin ne toimitetaan selaimelle. Esimerkiksi tässä nollaamme sivumme kirjasinten ja linkkien tyylit CSS-muuttujilla.

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

Ruudukon keskeytyspisteet

Vaikka sisällytämme ruudukon keskeytyspisteemme CSS-muuttujiksi (paitsi xs), muista, että CSS-muuttujat eivät toimi mediakyselyissä . Tämä on suunniteltu muuttujien CSS-spesifikaatioissa, mutta se voi muuttua tulevina vuosina env()muuttujien tuen myötä. Katso tästä Stack Overflow -vastauksesta hyödyllisiä linkkejä. Sillä välin voit käyttää näitä muuttujia muissa CSS-tilanteissa sekä JavaScriptissäsi.