Guherbarên CSS

Bootstrap gelek taybetmendiyên xwerû yên CSS (guhêrbar) di CSS-ya xweya berhevkirî de ji bo xwerûkirina rast-demê bêyî hewcedariya ji nû ve berhevkirina Sass vedihewîne. Vana dema ku di çavdêriya geroka we de, sandboxek kodê, an prototîpkirina gelemperî dixebitin, gihîştina nirxên gelemperî yên wekî rengên meya me, xalên veqetandinê, û stûnên tîpên bingehîn hêsan peyda dikin.

Hemî taybetmendiyên meyên xwerû bi pêşgir têne pêve kirinbs- da ku ji nakokiyên bi CSS-ya partiya sêyemîn re nekevin.

Guherbarên root

Li vir guhêrbarên ku em tê de ne (bala xwe bidin ku :rootew hewce ye) ku dikarin li her cîhê ku CSS-ya Bootstrap-ê hatî barkirin werin gihîştin. Ew di _root.scsspelê me de cih digirin û di pelên me yên berhevkirî de cih digirin.

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

Guherbarên pêkhatî

Em di heman demê de dest bi karanîna taybetmendiyên xwerû wekî guhêrbarên herêmî ji bo pêkhateyên cihêreng dikin. Bi vî rengî em dikarin CSS-ya xweya berhevkirî kêm bikin, pê ewle bibin ku şêwaz li cîhên mîna tabloyên hêlînkirî ne mîras in, û destûr bidin ku hin nûvekirin û dirêjkirina pêkhateyên Bootstrap piştî berhevkirina Sass-ê bidin.

Ji bo hin têgihîştinê li ser ka em guhêrbarên CSS-ê çawa bikar tînin , li belgeya tabloya me binêre .

Em di heman demê de guhêrbarên CSS-ê li seranserê torên xwe bikar tînin - di serî de ji bo gemaran - ku di pêşerojê de bêtir karanîna pêkhateyan tê.

Examples

Guherbarên CSS guhêrbarên Sass nermbûnek wekhev peyda dikin, lê bêyî ku hewcedariya berhevkirinê hebe berî ku ji gerokê re were pêşkêş kirin. Mînakî, li vir em tîpên rûpela xwe û şêwazên girêdanê bi guhêrbarên CSS-ê ji nû ve saz dikin.

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

Xalên şikestî yên Grid

Dema ku em xalên veqetandina tora xwe wekî guhêrbarên CSS-ê vedihewînin (ji bilî xs), hay ji xwe hebin ku guhêrbarên CSS di pirsên medyayê de naxebitin . Ev ji hêla sêwiranê ve di taybetmendiya CSS-ê de ji bo guhêrbaran e, lê dibe ku di salên pêş de bi piştgirîkirina env()guhêrbaran re biguhere. Vê bersiva Stack Overflow ji bo hin girêdanên alîkar binihêrin . Di vê navberê de, hûn dikarin van guherbaran di rewşên din ên CSS de, û hem jî di JavaScript-a xwe de bikar bînin.