CSS fariabelen

Bootstrap omfettet in protte oanpaste CSS-eigenskippen (fariabelen) yn har kompilearre CSS foar real-time oanpassing sûnder de needsaak om Sass opnij te kompilearjen. Dizze jouwe maklike tagong ta gewoan brûkte wearden lykas ús temakleuren, brekpunten en primêre lettertypestapels as jo wurkje yn 'e ynspekteur fan jo blêder, in koade sânbak, of algemiene prototyping.

Al ús oanpaste eigenskippen wurde foarôfgeand meibs- om konflikten mei CSS fan tredden te foarkommen.

Root fariabelen

Hjir binne de fariabelen dy't wy opnimme (notysje dat it :rootfereaske is) dy't oeral tagonklik wurde kinne wêr't Bootstrap's CSS wurdt laden. Se lizze yn ús _root.scssbestân en binne opnommen yn ús kompilearre dist-bestannen.

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

Komponint fariabelen

Bootstrap 5 makket hieltyd mear gebrûk fan oanpaste eigenskippen as lokale fariabelen foar ferskate komponinten. Op dizze manier ferminderje wy ús kompilearre CSS, soargje derfoar dat stilen net wurde erfd op plakken lykas nestele tabellen, en tastean wat basis restyling en útwreidzjen fan Bootstrap-komponinten nei Sass-kompilaasje.

Besjoch ús tabeldokumintaasje foar wat ynsjoch yn hoe't wy CSS-fariabelen brûke . Us navbars brûke ek CSS-fariabelen fanôf v5.2.0. Wy brûke ek CSS-fariabelen oer ús rasters - yn 't foarste plak foar gutters it nije opt-in CSS-raster - mei mear komponintgebrûk dat yn 'e takomst komt.

As it mooglik is, sille wy CSS-fariabelen tawize op it basiskomponintnivo (bygelyks .navbarfoar navbar en syn subkomponinten). Dit fermindert rieden oer wêr en hoe't jo kinne oanpasse, en makket it mooglik foar maklike oanpassingen troch ús team yn takomstige updates.

Foarheaksel

De measte CSS-fariabelen brûke in foarheaksel om botsingen mei jo eigen koadebase te foarkommen. Dit foarheaksel is njonken it --dat nedich is op elke CSS-fariabele.

Pas it foarheaksel oan fia de $prefixSass fariabele. Standert is it ynsteld op bs-(notysje op it efterste streepke).

Foarbylden

CSS-fariabelen biede ferlykbere fleksibiliteit as de fariabelen fan Sass, mar sûnder de needsaak foar kompilaasje foardat se wurde tsjinne oan 'e browser. Bygelyks, hjir stelle wy it lettertype en keppelingsstilen fan ús side werom mei CSS-fariabelen.

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

Grid breakpoints

Wylst wy ús grid breakpoints opnimme as CSS-fariabelen (útsein xs), wês bewust dat CSS-fariabelen net wurkje yn media-fragen . Dit is troch ûntwerp yn 'e CSS-spec foar fariabelen, mar kin de kommende jierren feroarje mei stipe foar env()fariabelen. Besjoch dit Stack Overflow-antwurd foar wat nuttige keppelings. Yn 'e tuskentiid kinne jo dizze fariabelen brûke yn oare CSS-situaasjes, lykas yn jo JavaScript.