Variables CSS

Bootstrap incluye alrededor de dos docenas de propiedades personalizadas de CSS (variables) en su CSS compilado, con decenas más en camino para una mejor personalización por componente. Estas proporcionan fácil acceso a valores de uso común como nuestros colores del tema, puntos de interrupción y pilas de fuentes principales cuando trabajas en el inspector de tu navegador, un sandbox de código o en 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-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 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);
}