Variables CSS

Bootstrap inclou moltes propietats personalitzades (variables) de CSS al seu CSS compilat per a la personalització en temps real sense necessitat de recompilar Sass. Aquests ofereixen un accés fàcil als valors d'ús habitual, com ara els nostres colors del tema, els punts d'interrupció i les piles de tipus de lletra principals quan treballeu a l'inspector del vostre navegador, a una zona de proves de codi o a la creació de prototips generals.

Totes les nostres propietats personalitzades tenen el prefixbs- per evitar conflictes amb CSS de tercers.

Variables arrel

Aquí hi ha les variables que incloem (tingueu en compte que :rootés necessària) a les quals es pot accedir a qualsevol lloc on es carregui el CSS de Bootstrap. Es troben al nostre _root.scssfitxer i s'inclouen als nostres fitxers dist compilats.

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

Variables dels components

Bootstrap 5 utilitza cada cop més propietats personalitzades com a variables locals per a diversos components. D'aquesta manera, reduïm el nostre CSS compilat, ens assegurem que els estils no s'hereten en llocs com ara taules imbricades i permetem un restyling bàsic i una ampliació dels components Bootstrap després de la compilació de Sass.

Fes una ullada a la documentació de la nostra taula per obtenir una visió de com estem utilitzant les variables CSS . Les nostres barres de navegació també utilitzen variables CSS a partir de la v5.2.0. També estem utilitzant variables CSS a les nostres quadrícules, principalment per a canalons, la nova quadrícula CSS activada , amb més ús de components en el futur.

Sempre que sigui possible, assignarem variables CSS al nivell de component base (per exemple, .navbarper a la barra de navegació i els seus subcomponents). Això redueix la possibilitat d'endevinar on i com personalitzar-lo, i permet que el nostre equip faci modificacions fàcils en futures actualitzacions.

Prefix

La majoria de variables CSS utilitzen un prefix per evitar col·lisions amb la vostra pròpia base de codi. Aquest prefix s'afegeix al --que es requereix a cada variable CSS.

Personalitzeu el prefix mitjançant la $prefixvariable Sass. De manera predeterminada, està configurat en bs-(tingueu en compte el guió final).

Exemples

Les variables CSS ofereixen una flexibilitat similar a les variables de Sass, però sense necessitat de compilar-les abans de ser enviades al navegador. Per exemple, aquí estem restablint el tipus de lletra i els estils d'enllaç de la nostra pàgina amb variables CSS.

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

Punts d'interrupció de la graella

Tot i que incloem els nostres punts d'interrupció de la quadrícula com a variables CSS (excepte xs), tingueu en compte que les variables CSS no funcionen a les consultes multimèdia . Això és per disseny a l'especificació CSS ​​per a variables, però pot canviar en els propers anys amb suport per a env()variables. Consulteu aquesta resposta de Stack Overflow per obtenir alguns enllaços útils. Mentrestant, podeu utilitzar aquestes variables en altres situacions CSS, així com en el vostre JavaScript.