Iinguqu zeCSS

I-Bootstrap ibandakanya malunga neshumi elinesibini leempawu zesiko le-CSS (izinto eziguquguqukayo) kwi-CSS yayo ehlanganisiweyo, kunye nezinye ezininzi ezisendleleni yokuphucula ukwenziwa ngokwezifiso ngokwecandelo ngalinye. 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- ukuthintela ungquzulwano nomntu wesithathu CSS.

Iingcambu eziguquguqukayo

Nazi izinto eziguquguqukayo esizibandakanyayo (qaphela ukuba :rootiyafuneka) enokufikelelwa naphi na i-CSS ye-Bootstrap ilayishiwe. Zifumaneka _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-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));
}

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