CSS mainīgie

Bootstrap savā kompilētajā CSS ietver aptuveni divus desmitus CSS pielāgoto rekvizītu (mainīgo) , turklāt vēl desmitiem ir paredzēts uzlabot katra komponenta pielāgošanu. Tie nodrošina vieglu piekļuvi bieži lietotām vērtībām, piemēram, motīvu krāsām, pārtraukuma punktiem un primārajiem fontu skursteņiem, strādājot pārlūkprogrammas inspektorā, koda smilškastes vai vispārējās prototipēšanas programmā.

Visiem mūsu pielāgotajiem rekvizītiem ir pievienots prefikss,bs- lai izvairītos no konfliktiem ar trešās puses CSS.

Saknes mainīgie

Šeit ir iekļauti mainīgie (ņemiet vērā, ka tas :rootir nepieciešams), kuriem var piekļūt jebkurā vietā, kur tiek ielādēts Bootstrap CSS. Tie atrodas mūsu _root.scssfailā un ir iekļauti mūsu apkopotajos dist failos.

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

Komponentu mainīgie

Mēs arī sākam izmantot pielāgotos rekvizītus kā vietējos mainīgos dažādiem komponentiem. Tādā veidā mēs varam samazināt mūsu kompilēto CSS, nodrošināt, ka stili netiek mantoti tādās vietās kā ligzdotas tabulas, un atļaut dažas pamata pārveidošanas un Bootstrap komponentu paplašināšanas pēc Sass kompilācijas.

Apskatiet mūsu tabulas dokumentāciju, lai gūtu ieskatu par to, kā mēs izmantojam CSS mainīgos .

Mēs arī izmantojam CSS mainīgos savos režģos — galvenokārt notekcaurulēm —, un nākotnē tiks izmantots vairāk komponentu.

Piemēri

CSS mainīgie piedāvā līdzīgu elastību kā Sass mainīgie, taču bez nepieciešamības tos apkopot, pirms tie tiek rādīti pārlūkprogrammai. Piemēram, šeit mēs atiestatām mūsu lapas fontu un saišu stilus, izmantojot CSS mainīgos.

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