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

Izinto eziguquguqukayo zamacandelo

Sikwaqala ukusebenzisa iipropathi zesiko njengoguquko lwasekhaya kumacandelo awohlukeneyo. Ngale ndlela sinokuyinciphisa i-CSS yethu ehlanganisiweyo, siqinisekise ukuba izitayile azizuzwana kwiindawo ezinjengeetafile ezibekwe kwindlwane, kwaye sivumele ukulungiswa kwakhona okusisiseko kunye nokwandiswa kwezinto zeBootstrap emva kokuhlanganiswa kwe-Sass.

Jonga kuxwebhu lwethu lwetafile ukuze ufumane ulwazi malunga nendlela esizisebenzisa ngayo izinto eziguquguqukayo zeCSS .

Sikwasebenzisa izinto eziguquguqukayo zeCSS kuzo zonke iigridi zethu-ngokukodwa iigutters-kunye nokusetyenziswa kwecandelo elizayo kwixesha elizayo.

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.