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

Komponent veranderlikes

Bootstrap 5 maak toenemend gebruik van pasgemaakte eienskappe as plaaslike veranderlikes vir verskeie komponente. Op hierdie manier verminder ons ons saamgestelde CSS, verseker ons dat style nie in plekke soos geneste tabelle geërf word nie, en laat ons 'n paar basiese herstilering en uitbreiding van Bootstrap-komponente toe na Sass-samestelling.

Kyk na ons tabeldokumentasie vir 'n bietjie insig in hoe ons CSS-veranderlikes gebruik . Ons navigasiebalke gebruik ook CSS-veranderlikes vanaf v5.2.0. Ons gebruik ook CSS-veranderlikes regoor ons roosters - hoofsaaklik vir geute, die nuwe CSS-rooster - met meer komponentgebruik wat in die toekoms kom.

Waar moontlik, sal ons CSS-veranderlikes op die basiskomponentvlak toewys (bv. .navbarvir navbar en sy sub-komponente). Dit verminder raai oor waar en hoe om aan te pas, en maak voorsiening vir maklike wysigings deur ons span in toekomstige opdaterings.

Voorvoegsel

Die meeste CSS-veranderlikes gebruik 'n voorvoegsel om botsings met jou eie kodebasis te vermy. Hierdie voorvoegsel is bykomend tot die --wat op elke CSS-veranderlike vereis word.

Pas die voorvoegsel aan via die $prefixSass-veranderlike. By verstek is dit ingestel op bs-(let op die agterste streep).

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.