CSS fariabelen

Bootstrap omfettet sawat twa tsientallen oanpaste CSS-eigenskippen (fariabelen) yn har kompilearre CSS, mei tsientallen mear op 'e wei foar ferbettere oanpassing op in per-komponint basis. 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-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));
}

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