CSS mainīgie

Bootstrap savā kompilētajā CSS ietver daudzus CSS pielāgotos rekvizītus (mainīgos) , lai veiktu pielāgošanu reāllaikā bez nepieciešamības atkārtoti kompilēt Sass. 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-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;
}

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

Režģa pārtraukuma punkti

Lai gan mēs iekļaujam savus režģa pārtraukuma punktus kā CSS mainīgos (izņemot xs), ņemiet vērā, ka CSS mainīgie nedarbojas multivides vaicājumos . Tas ir paredzēts mainīgo CSS specifikācijā, taču turpmākajos gados tas var mainīties, atbalstot env()mainīgos. Apskatiet šo Stack Overflow atbildi , lai iegūtu dažas noderīgas saites. Tikmēr varat izmantot šos mainīgos citās CSS situācijās, kā arī savā JavaScript.