Impinduka za CSS

Bootstrap ikubiyemo ibintu bibiri bya CSS byigenga (impinduka) muri CSS yakozwe, hamwe nibindi byinshi munzira yo kunonosora ibintu kuri buri kintu. Ibi bitanga uburyo bworoshye kubintu bisanzwe bikoreshwa nkamabara yinsanganyamatsiko, gucamo, hamwe nimyandikire yibanze mugihe ukorera mugenzuzi wa mushakisha yawe, agasanduku kode, cyangwa prototyping rusange.

Imitungo yacu yose yihariye yashyizwe hamwebs- kugirango twirinde amakimbirane nundi muntu CSS.

Impinduka zumuzi

Dore impinduka dushyiramo (menya ko :rootibisabwa) zishobora kuboneka ahantu hose CSS ya Bootstrap yuzuye. Biri muri _root.scssdosiye yacu kandi yashyizwe muri dosiye zacu za kure.

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

Ibihinduka

Turatangiye kandi gukoresha imitungo yihariye nkibihinduka byaho mubice bitandukanye. Ubu buryo turashobora kugabanya CSS twakusanyije, tukemeza ko imisusire itarazwe ahantu nkameza yateranijwe, kandi tukemerera bimwe byibanze gusubiramo no kwagura ibice bya Bootstrap nyuma yo gukusanya Sass.

Gira icyo ureba kumeza yacu kugirango tumenye uburyo dukoresha impinduka za CSS .

Turimo gukoresha kandi impinduka za CSS murwego rwa gride-cyane cyane kumiyoboro-hamwe nibindi bikoresho bikoreshwa bizaza.

Ingero

Impinduka za CSS zitanga ihinduka risa nimpinduka za Sass, ariko bidakenewe gukusanya mbere yo guhabwa mushakisha. Kurugero, hano turimo dusubiramo imyandikire yurupapuro rwacu hamwe nuburyo bwo guhuza hamwe na CSS ihinduka.

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