CSS veranderlikes

Bootstrap bevat baie pasgemaakte CSS-eienskappe (veranderlikes) in sy saamgestelde CSS vir intydse aanpassing sonder dat dit nodig is om Sass te hersaamstel. 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-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;
}

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

Rooster breekpunte

Terwyl ons ons roosterafbreekpunte as CSS-veranderlikes insluit (behalwe vir xs), wees bewus daarvan dat CSS-veranderlikes nie in medianavrae werk nie . Dit is ontwerp in die CSS-spesifikasie vir veranderlikes, maar kan in die komende jare verander met ondersteuning vir env()veranderlikes. Kyk na hierdie Stack Overflow-antwoord vir 'n paar nuttige skakels. Intussen kan jy hierdie veranderlikes in ander CSS-situasies gebruik, sowel as in jou JavaScript.