variabile CSS

Bootstrap include multe proprietăți personalizate (variabile) CSS în CSS-ul său compilat pentru personalizare în timp real, fără a fi nevoie să recompilați Sass. Acestea oferă acces ușor la valorile utilizate în mod obișnuit, cum ar fi culorile temei, punctele de întrerupere și stivele de fonturi principale atunci când lucrați în inspectorul browserului dvs., un cod sandbox sau prototipuri generale.

Toate proprietățile noastre personalizate sunt prefixate cubs- pentru a evita conflictele cu CSS terțe părți.

Variabile rădăcină

Iată variabilele pe care le includem (rețineți că :rooteste necesar) care pot fi accesate oriunde este încărcat CSS-ul Bootstrap. Sunt localizate în _root.scssfișierul nostru și incluse în fișierele noastre dist compilate.

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

Variabile componente

De asemenea, începem să folosim proprietăți personalizate ca variabile locale pentru diferite componente. În acest fel, putem reduce CSS-ul nostru compilat, ne putem asigura că stilurile nu sunt moștenite în locuri precum tabelele imbricate și putem permite restilizarea de bază și extinderea componentelor Bootstrap după compilarea Sass.

Aruncă o privire la documentația tabelului nostru pentru o perspectivă asupra modului în care folosim variabilele CSS .

De asemenea, folosim variabile CSS în grilele noastre, în primul rând pentru jgheaburi, urmând să utilizăm mai multe componente în viitor.

Exemple

Variabilele CSS oferă o flexibilitate similară cu variabilele lui Sass, dar fără a fi nevoie de compilare înainte de a fi transmise browserului. De exemplu, aici resetăm fontul și stilurile de link ale paginii noastre cu variabile CSS.

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

Puncte de întrerupere a rețelei

Deși includem punctele noastre de întrerupere a grilei ca variabile CSS (cu excepția xs), rețineți că variabilele CSS nu funcționează în interogările media . Acest lucru este proiectat în specificațiile CSS pentru variabile, dar se poate schimba în anii următori cu suport pentru env()variabile. Consultați acest răspuns Stack Overflow pentru câteva link-uri utile. Între timp, puteți utiliza aceste variabile în alte situații CSS, precum și în JavaScript.