CSS-muuttujat

Bootstrap sisältää noin kaksi tusinaa mukautettua CSS-ominaisuutta (muuttujaa) käännetyssä CSS:ssä, ja kymmeniä muita on tulossa parantamaan komponenttikohtaista räätälöintiä. 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-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));
}

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