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-black: #000;
  --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", "Noto Sans", "Liberation Sans", Arial, 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;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

Variables de componentes

Bootstrap 5 utiliza cada vez más las propiedades personalizadas como variables locales para varios componentes. De esta manera, reducimos nuestro CSS compilado, nos aseguramos de que los estilos no se hereden en lugares como tablas anidadas y permitimos 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 . Nuestras barras de navegación también usan variables CSS a partir de la versión 5.2.0. También estamos usando variables de CSS en nuestras cuadrículas, principalmente para los canalones de la nueva cuadrícula de CSS opcional, con más uso de componentes en el futuro.

Siempre que sea posible, asignaremos variables CSS en el nivel del componente base (p. ej., .navbarpara la barra de navegación y sus subcomponentes). Esto reduce las conjeturas sobre dónde y cómo personalizar, y permite modificaciones fáciles por parte de nuestro equipo en futuras actualizaciones.

Prefijo

La mayoría de las variables CSS usan un prefijo para evitar colisiones con su propio código base. Este prefijo se suma al --que se requiere en cada variable CSS.

Personaliza el prefijo a través de la $prefixvariable Sass. De forma predeterminada, está configurado en bs-(observe el guión final).

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.