Variables CSS

Bootstrap incluye muchas propiedades personalizadas de CSS (variables) en su CSS compilado para personalización en tiempo real sin necesidad de recompilar Sass. Estas proporcionan acceso fácil a valores comúnmente usados como nuestros colores del tema, breakpoints, y pilas de fuentes principales cuando trabajas en el inspector de tu navegador, un sandbox de código, o prototipado general.

Todas nuestras propiedades personalizadas tienen el prefijo bs- para evitar conflictos con CSS de terceros.

Variables raíz

Aquí están las variables que incluimos (ten en cuenta que :root es obligatorio) a las que se puede acceder desde cualquier lugar donde se cargue el CSS de Bootstrap. Se encuentran en nuestro archivo _root.scss y se incluyen en nuestros archivos 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 componentes

También estamos empezando a usar propiedades personalizadas como variables locales para varios componentes. De esta manera podemos reducir nuestro CSS compilado, asegurar que los estilos no se hereden en lugares como tablas anidadas, y permitir algo de reestilizado básico y extensión de los componentes de Bootstrap después de la compilación de Sass.

Echa un vistazo a nuestra documentación de tablas para obtener una idea de cómo estamos usando las variables de CSS.

También estamos usando variables de CSS en nuestros grids—principalmente para los gutters—con más uso en componentes en el futuro.

Ejemplos

Las variables de CSS ofrecen una flexibilidad similar a las variables de Sass, pero sin necesidad de compilación antes de servirse al navegador. Por ejemplo, aquí estamos reestableciendo la fuente y los estilos de los enlaces de nuestra página con variables de CSS.

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

Breakpoints de la grid

Aunque incluimos nuestros breakpoints de la grid como variables CSS (excepto para xs), ten en cuenta que las variables CSS no funcionan en media queries. Esto es por diseño en la especificación de CSS para variables, pero puede cambiar en los próximos años con el soporte de variables env(). Revisa esta respuesta de Stack Overflow para algunos enlaces útiles. Mientras tanto, puedes usar estas variables en otras situaciones de CSS, así como en tu JavaScript.