Variablat CSS

Bootstrap përfshin shumë veti (variabla) me porosi të CSS në CSS-në e tij të përpiluar për personalizim në kohë reale pa nevojën për të ripërpiluar Sass. Këto sigurojnë qasje të lehtë në vlerat e përdorura zakonisht si ngjyrat tona të temave, pikat e ndërprerjes dhe grupet kryesore të shkronjave kur punoni në inspektorin e shfletuesit tuaj, një kuti rërë kodi ose prototipi të përgjithshëm.

Të gjitha pronat tona të personalizuara janë prefiksuar mebs- për të shmangur konfliktet me CSS të palës së tretë.

Variablat rrënjë

Këtu janë variablat që ne përfshijmë (vini re se :rootkërkohet) që mund të aksesohen kudo ku ngarkohet CSS e Bootstrap. Ato ndodhen në _root.scssskedarin tonë dhe përfshihen në skedarët tanë të përpiluar dist.

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

Variablat përbërës

Ne po fillojmë gjithashtu të përdorim vetitë e personalizuara si variabla lokale për komponentë të ndryshëm. Në këtë mënyrë ne mund të zvogëlojmë CSS-në tonë të përpiluar, të sigurojmë që stilet të mos trashëgohen në vende si tabelat e mbivendosura dhe të lejojmë disa rivendosje dhe zgjerim bazë të komponentëve të Bootstrap pas përpilimit të Sass.

Hidhini një sy dokumentacionit tonë të tabelës për disa njohuri se si po përdorim variablat CSS .

Ne po përdorim gjithashtu variabla CSS në rrjetet tona - kryesisht për ulluqet - me më shumë përdorim të komponentëve që vijnë në të ardhmen.

Shembuj

Variablat CSS ofrojnë fleksibilitet të ngjashëm me variablat e Sass, por pa nevojën për përpilim përpara se të shërbehen në shfletues. Për shembull, këtu po rivendosim stilet e shkronjave dhe lidhjeve të faqes sonë me variabla CSS.

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

Pikat e ndërprerjes së rrjetit

Ndërsa ne përfshijmë pikat e ndërprerjes së rrjetit tonë si variabla CSS (përveç xs), kini parasysh se variablat CSS nuk funksionojnë në pyetjet e medias . Kjo është sipas dizajnit në specifikat CSS për variablat, por mund të ndryshojë në vitet e ardhshme me mbështetjen për env()variablat. Shikoni këtë përgjigje të Stack Overflow për disa lidhje të dobishme. Ndërkohë, ju mund t'i përdorni këto variabla në situata të tjera CSS, si dhe në JavaScript tuaj.