Iinguqu zeCSS

I-Bootstrap ibandakanya iipropati ezininzi zesiko le-CSS (izinto eziguquguqukayo) kwi-CSS yayo ehlanganisiweyo kulungiselelwa ixesha lokwenyani ngaphandle kwesidingo sokubuyisela kwakhona i-Sass. Ezi zibonelela ngofikelelo olulula kumaxabiso aqhele ukusetyenziswa njengemibala yomxholo wethu, iindawo zokuqhawula, kunye nezipaki zefonti eziphambili xa usebenza kumhloli webrawuza yakho, ikhowudi yebhokisi yesanti, okanye iprototyping jikelele.

Zonke iipropathi zethu zesiko zifakwe ngaphambilibs- ukunqanda ungquzulwano nomntu wesithathu CSS.

Iingcambu eziguquguqukayo

Nazi izinto eziguquguqukayo esizibandakanyayo (qaphela ukuba :rootiyafuneka) enokufikelelwa naphi na i-CSS ye-Bootstrap ilayishiwe. Zibekwe _root.scsskwifayile yethu kwaye zibandakanyiwe kwiifayile zethu ezihlanganisiweyo.

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

Izinto eziguquguqukayo zamacandelo

I-Bootstrap 5 isanda kusebenzisa iipropathi zesiko njengezinto eziguquguqukayo zasekhaya kumacandelo awohlukeneyo. Ngale ndlela sinciphisa i-CSS yethu ehlanganisiweyo, siqinisekisa ukuba izitayile azizuzwana kwiindawo ezifana neetafile ezibekwe kwindlwane, kwaye sivumele ukulungiswa kwakhona okusisiseko kunye nokwandiswa kwezinto zeBootstrap emva kokuhlanganiswa kwe-Sass.

Jonga kuxwebhu lwethu lwetafile ukuze ufumane ulwazi malunga nendlela esisebenzisa ngayo izinto eziguquguqukayo zeCSS . Ii- navbar zethu nazo zisebenzisa ii-variables ze-CSS njenge-v5.2.0. Sikwasebenzisa izinto eziguquguqukayo zeCSS kuzo zonke iigridi zethu-ngokukodwa iigutter igridi entsha yokungena yeCSS- kunye nokusetyenziswa kwecandelo elizayo kwixesha elizayo.

Nanini na xa kusenzeka, siya kwabela izinto eziguquguqukayo ze-CSS kwinqanaba lecandelo elisisiseko (umzekelo, .navbarkwi-navbar namacandelwana ayo). Oku kunciphisa intelekelelo yokuba ungenziwa phi kwaye njani, kwaye ivumela uhlengahlengiso olulula liqela lethu kuhlaziyo oluzayo.

Isimaphambili

Uninzi lwezinto eziguquguqukayo zeCSS zisebenzisa isimaphambili ukunqanda ukungqubana nesiseko sakho sekhowudi. Esi simaphambili songezwa --koko kufunekayo kuwo wonke umahluko weCSS.

Lungiselela isimaphambili usebenzisa $prefixiSass variable. Ngokungagqibekanga, imiselwe ku bs-(qaphela isikhewu esilandela umkhondo).

Imizekelo

Izinto eziguquguqukayo zeCSS zibonelela ngokuguquguquka okufanayo kwizinto eziguquguqukayo zeSass, kodwa ngaphandle kwesidingo sokuhlanganiswa ngaphambi kokuba zinikezelwe kwisikhangeli. Umzekelo, apha siseta ngokutsha ifonti yephepha lethu kunye nezimbo zekhonkco ezineenguqu zeCSS.

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

Iindawo zokuqhawula igridi

Ngelixa sibandakanya ii-breakpoints zethu zegridi njengezinto eziguquguqukayo zeCSS (ngaphandle kwe xs), qaphela ukuba izinto eziguquguqukayo zeCSS azisebenzi kwimibuzo yemidiya . Oku kungoyilo kwi-CSS spec for variables, kodwa inokutshintsha kwiminyaka ezayo ngenkxaso yezinto env()eziguquguqukayo. Jonga le mpendulo yokuPhuma kweSitaki kwezinye iindawo eziluncedo. Okwangoku, ungasebenzisa ezi ziguquguqukayo kwezinye iimeko zeCSS, kunye nakwiJavaScript yakho.