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

Komponint fariabelen

Wy begjinne ek gebrûk te meitsjen fan oanpaste eigenskippen as lokale fariabelen foar ferskate komponinten. Op dizze manier kinne wy ​​ús kompilearre CSS ferminderje, soargje dat stilen net wurde erfd yn plakken lykas nestele tabellen, en wat basale restyling en útwreidzjen fan Bootstrap-komponinten tastean nei Sass-kompilaasje.

Besjoch ús tabeldokumintaasje foar wat ynsjoch yn hoe't wy CSS-fariabelen brûke .

Wy brûke ek CSS-fariabelen oer ús rasters - yn 't foarste plak foar goten - mei mear komponintgebrûk dat yn 'e takomst komt.

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.