Impinduka za CSS

Koresha ibikoresho bya CSS ya Bootstrap kugirango wihute kandi ureba imbere igishushanyo mbonera.

Kuriyi page

Bootstrap ikubiyemo ibintu byinshi bya CSS byihariye (variable) muri CSS yakusanyirijwe mugihe nyacyo cyo kwihitiramo bidakenewe gusubiramo Sass. 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-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;
}

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

Imiyoboro ya interineti

Mugihe dushyiramo ibice byacu bya gride nkibihinduka bya CSS (usibye xs), menya ko impinduka za CSS zidakora mubibazo byitangazamakuru . Nibishushanyo mbonera bya CSS kubihinduka, ariko birashobora guhinduka mumyaka iri imbere hamwe ninkunga env()ihindagurika. Reba iki gisubizo cya Stack Kurenga kubisubizo bimwe bifasha. Hagati aho, urashobora gukoresha izi mpinduka mubindi bihe bya CSS, kimwe no muri JavaScript yawe.