Variables CSS

Bootstrap inclou unes dues dotzenes de propietats personalitzades (variables) CSS al seu CSS compilat, amb desenes més en camí per millorar la personalització per component. 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-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --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-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));
}

Variables dels components

També estem començant a utilitzar propietats personalitzades com a variables locals per a diversos components. D'aquesta manera podem reduir el nostre CSS compilat, assegurar-nos que els estils no s'hereten en llocs com ara taules imbricades i permetre 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 informació sobre com estem utilitzant les variables CSS .

També estem utilitzant variables CSS a les nostres graelles, principalment per a canalons, amb més ús de components en el futur.

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