CSS veranderlikes

Bootstrap bevat ongeveer twee dosyn pasgemaakte CSS-eienskappe (veranderlikes) in sy saamgestelde CSS, met dosyne meer op pad vir verbeterde aanpassing op 'n per-komponent-basis. Dit bied maklike toegang tot algemeen gebruikte waardes soos ons temakleure, breekpunte en primêre lettertipestapels wanneer jy in jou blaaier se inspekteur, 'n kode-sandbox of algemene prototipering werk.

Al ons pasgemaakte eiendomme word voorafgegaanbs- om konflikte met derdeparty-CSS te vermy.

Wortel veranderlikes

Hier is die veranderlikes wat ons insluit (let daarop dat :rootdit vereis word) wat toegang verkry kan word oral waar Bootstrap se CSS gelaai is. Hulle is in ons _root.scsslêer geleë en ingesluit in ons saamgestelde dist-lêers.

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

Komponent veranderlikes

Ons begin ook gebruik maak van pasgemaakte eienskappe as plaaslike veranderlikes vir verskeie komponente. Op hierdie manier kan ons ons saamgestelde CSS verminder, verseker dat style nie op plekke soos geneste tabelle geërf word nie, en 'n mate van basiese herstilering en uitbreiding van Bootstrap-komponente na Sass-samestelling toelaat.

Kyk na ons tabeldokumentasie vir 'n bietjie insig in hoe ons CSS-veranderlikes gebruik .

Ons gebruik ook CSS-veranderlikes oor ons roosters - hoofsaaklik vir geute - met meer komponentgebruik wat in die toekoms kom.

Voorbeelde

CSS-veranderlikes bied soortgelyke buigsaamheid as Sass se veranderlikes, maar sonder die behoefte aan samestelling voordat dit aan die blaaier bedien word. Hier stel ons byvoorbeeld ons bladsy se lettertipe en skakelstyle met CSS-veranderlikes terug.

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