Variables CSS

Bootstrap inclúe moitas propiedades personalizadas de CSS (variables) no seu CSS compilado para a personalización en tempo real sen necesidade de recompilar Sass. Estes proporcionan un fácil acceso a valores de uso habitual, como as nosas cores do tema, os puntos de interrupción e as pilas de fontes primarias cando traballas no inspector do teu navegador, nun sandbox de código ou na creación de prototipos en xeral.

Todas as nosas propiedades personalizadas teñen un prefixobs- para evitar conflitos con CSS de terceiros.

Variables raíz

Aquí están as variables que incluímos (ten en conta que :rooté necesario) ás que se pode acceder en calquera lugar onde se cargue o CSS de Bootstrap. Están localizados no noso _root.scssficheiro e incluídos nos nosos ficheiros dist compilados.

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

Variables de compoñentes

Tamén estamos comezando a facer uso de propiedades personalizadas como variables locais para varios compoñentes. Deste xeito, podemos reducir o noso CSS compilado, asegurarnos de que os estilos non se herdan en lugares como táboas aniñadas e permitir un restyling básico e ampliación dos compoñentes de Bootstrap despois da compilación de Sass.

Bótalle un ollo á documentación da nosa táboa para obter información sobre como usamos as variables CSS .

Tamén estamos a usar variables CSS nas nosas cuadrículas, principalmente para canaletas, con máis uso de compoñentes no futuro.

Exemplos

As variables CSS ofrecen unha flexibilidade similar ás variables de Sass, pero sen necesidade de compilalas antes de ser enviadas ao navegador. Por exemplo, aquí estamos a restablecer o tipo de letra e os estilos de ligazón da nosa páxina con variables CSS.

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

Puntos de interrupción da reixa

Aínda que incluímos os nosos puntos de interrupción da grella como variables CSS (excepto por xs), teña en conta que as variables CSS non funcionan nas consultas multimedia . Isto é por deseño na especificación CSS para variables, pero pode cambiar nos próximos anos co soporte para env()variables. Consulte esta resposta de Stack Overflow para ver algunhas ligazóns útiles. Mentres tanto, podes usar estas variables noutras situacións CSS, así como no teu JavaScript.