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

Variabile componente

Bootstrap 5 folosește din ce în ce mai mult proprietățile personalizate ca variabile locale pentru diferite componente. În acest fel, reducem CSS-ul nostru compilat, ne asigurăm că stilurile nu sunt moștenite în locuri precum tabelele imbricate și permitem restilizarea și extinderea de bază a componentelor Bootstrap după compilarea Sass.

Aruncă o privire la documentația tabelului nostru pentru o perspectivă asupra modului în care folosim variabilele CSS . Barele noastre de navigare folosesc și variabile CSS începând cu v5.2.0. De asemenea, folosim variabile CSS în grilele noastre – în primul rând pentru jgheaburi, noua grilă CSS opt-in – cu o utilizare mai mare a componentelor în viitor.

Ori de câte ori este posibil, vom atribui variabile CSS la nivelul componentei de bază (de exemplu, .navbarpentru bara de navigare și subcomponentele sale). Acest lucru reduce ghicitul unde și cum să personalizați și permite modificări ușoare de către echipa noastră în actualizările viitoare.

Prefix

Majoritatea variabilelor CSS folosesc un prefix pentru a evita coliziunile cu propria bază de cod. Acest prefix este în plus față de cel --necesar pentru fiecare variabilă CSS.

Personalizați prefixul prin $prefixvariabila Sass. În mod implicit, este setat la bs-(rețineți liniuța finală).

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.