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-black: #000;
  --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", "Noto Sans", "Liberation Sans", Arial, 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;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

Guherbarên pêkhatî

Bootstrap 5 her ku diçe taybetmendiyên xwerû wekî guhêrbarên herêmî ji bo pêkhateyên cihêreng bikar tîne. Bi vî rengî em CSS-ya xweya berhevkirî kêm dikin, piştrast dikin ku şêwaz li cîhên mîna tabloyên hêlînkirî ne mîras in, û destûr didin hin nûvekirin û dirêjkirina pêkhateyên Bootstrap piştî berhevkirina Sass.

Ji bo hin têgihîştinê li ser ka em guhêrbarên CSS-ê çawa bikar tînin , li belgeya tabloya me binêre . Navbarên me jî wekî v5.2.0 guherbarên CSS bikar tînin . Em di heman demê de guhêrbarên CSS-ê li seranserê torên xwe bikar tînin - di serî de ji bo gemaran tora nû ya vebijarkî ya CSS-ê ku di pêşerojê de bêtir karanîna pêkhateyan tê.

Kengê ku gengaz be, em ê guhêrbarên CSS-ê di asta pêkhateya bingehîn de destnîşan bikin (mînak, .navbarji bo navbar û jêr-pêkhateyên wê). Vê yekê texmînkirina li ku û çawa meriv xweş bike kêm dike, û di nûvekirinên pêşerojê de ji hêla tîmê me ve guheztinên hêsan dihêle.

Pêşkîte

Pir guhêrbarên CSS pêşgirek bikar tînin da ku ji têkçûna koda xweya xwe dûr bisekinin. Ev pêşgir ji bilî ya --ku li ser her guhêrbarek CSS-ê hewce ye.

Pêşgira bi $prefixguhêrbar Sass ve xweş bikin. Ji hêla xwerû ve, ew li ser hatî danîn bs-(guhê xwe bidin xêzika paşîn).

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.