Variables CSS

Bootstrap incluye muchas propiedades personalizadas de CSS (variables) en su CSS compilado para la personalización en tiempo real sin necesidad de volver a compilar Sass. 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-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 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);
}

Puntos de interrupción de cuadrícula

Si bien incluimos nuestros puntos de interrupción de cuadrícula como variables CSS (excepto xs), tenga en cuenta que las variables CSS no funcionan en las consultas de medios . Esto es por diseño en la especificación CSS para variables, pero puede cambiar en los próximos años con soporte para env()variables. Consulte esta respuesta de desbordamiento de pila para obtener algunos enlaces útiles. Mientras tanto, puede usar estas variables en otras situaciones de CSS, así como en su JavaScript.