Variables CSS

Bootstrap incluye alrededor de dos docenas de propiedades personalizadas de CSS (variables) en su CSS compilado, con docenas más en camino para mejorar la personalización por componente. Estos brindan un fácil acceso a los valores de uso común, como nuestros colores de tema, puntos de interrupción y pilas de fuentes primarias cuando se trabaja en el inspector de su navegador, un entorno limitado de código o creación de prototipos en general.

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

Variables raíz

Estas son las variables que incluimos (tenga en cuenta que :rootse requiere) a las que se puede acceder en cualquier lugar donde se cargue el CSS de Bootstrap. Están ubicados en nuestro _root.scssarchivo e incluidos 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 comenzando a utilizar propiedades personalizadas como variables locales para varios componentes. De esta manera, podemos reducir nuestro CSS compilado, asegurarnos de que los estilos no se hereden en lugares como tablas anidadas y permitir algunos cambios de estilo básicos y la ampliación de los componentes de Bootstrap después de la compilación de Sass.

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

También estamos usando variables CSS en nuestras cuadrículas, principalmente para canales, con más uso de 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 ser enviadas al navegador. Por ejemplo, aquí estamos restableciendo la fuente de nuestra página y los estilos de enlace con variables CSS.

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