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

Komponentu mainīgie

Bootstrap 5 arvien vairāk izmanto pielāgotus rekvizītus kā dažādu komponentu lokālos mainīgos. Tādā veidā mēs samazinām savu kompilēto CSS, nodrošinām, ka stili netiek mantoti tādās vietās kā ligzdotas tabulas, un ļaujam dažus pamata pārveidojumus un Bootstrap komponentu paplašināšanu pēc Sass kompilēšanas.

Apskatiet mūsu tabulas dokumentāciju, lai gūtu ieskatu par to, kā mēs izmantojam CSS mainīgos . Mūsu navigācijas joslās tiek izmantoti arī CSS mainīgie no v5.2.0. Mēs arī izmantojam CSS mainīgos savos režģos — galvenokārt notekcaurulēm, jaunajam izvēles CSS režģim — nākotnē tiks izmantots vairāk komponentu.

Kad vien iespējams, mēs piešķirsim CSS mainīgos pamatkomponentu līmenī (piemēram, .navbarnavigācijas joslai un tās apakškomponentiem). Tas samazina minējumus par to, kur un kā pielāgot, un mūsu komanda var viegli veikt izmaiņas turpmākajos atjauninājumos.

Priedēklis

Lielākā daļa CSS mainīgo izmanto prefiksu, lai izvairītos no sadursmēm ar jūsu pašu kodu bāzi. Šis prefikss ir papildus tam, --kas nepieciešams katram CSS mainīgajam.

Pielāgojiet prefiksu, izmantojot $prefixmainīgo Sass. Pēc noklusējuma tas ir iestatīts uz bs-(ņemiet vērā beigu domuzīmi).

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.