Variables CSS

Bootstrap inclúe moitas propiedades personalizadas de CSS (variables) no seu CSS compilado para a personalización en tempo real sen necesidade de recompilar Sass. Estes proporcionan un fácil acceso a valores de uso habitual, como as nosas cores do tema, os puntos de interrupción e as pilas de fontes primarias cando traballas no inspector do teu navegador, nun sandbox de código ou na creación de prototipos en xeral.

Todas as nosas propiedades personalizadas teñen un prefixobs- para evitar conflitos con CSS de terceiros.

Variables raíz

Aquí están as variables que incluímos (ten en conta que :rooté necesario) ás que se pode acceder en calquera lugar onde se cargue o CSS de Bootstrap. Están localizados no noso _root.scssficheiro e incluídos nos nosos ficheiros 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 compoñentes

Bootstrap 5 utiliza cada vez máis propiedades personalizadas como variables locais para varios compoñentes. Deste xeito, reducimos o noso CSS compilado, aseguramos que os estilos non se herdan en lugares como táboas aniñadas e permitimos un restyling básico e ampliación dos compoñentes de Bootstrap despois da compilación de Sass.

Bótalle un ollo á documentación da nosa táboa para obter información sobre como usamos as variables CSS . As nosas barras de navegación tamén usan variables CSS a partir da versión 5.2.0. Tamén estamos a usar variables CSS nas nosas cuadrículas, sobre todo para as cunetas, a nova cuadrícula CSS activada , con máis uso de compoñentes no futuro.

Sempre que sexa posible, asignaremos variables CSS ao nivel do compoñente base (por exemplo, .navbarpara a barra de navegación e os seus subcompoñentes). Isto reduce a posibilidade de adiviñar onde e como personalizar e permite que o noso equipo faga modificacións sinxelas en futuras actualizacións.

Prefixo

A maioría das variables CSS usan un prefixo para evitar colisións coa túa propia base de código. Este prefixo súmase ao --que se require en cada variable CSS.

Personaliza o prefixo mediante a $prefixvariable Sass. De xeito predeterminado, está configurado en bs-(teña en conta o guión ao final).

Exemplos

As variables CSS ofrecen unha flexibilidade similar ás variables de Sass, pero sen necesidade de compilalas antes de ser enviadas ao navegador. Por exemplo, aquí estamos a restablecer o tipo de letra e os estilos de ligazón da nosa páxina con variables CSS.

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

Puntos de interrupción da reixa

Aínda que incluímos os nosos puntos de interrupción da grella como variables CSS (excepto por xs), teña en conta que as variables CSS non funcionan nas consultas multimedia . Isto é por deseño na especificación CSS para variables, pero pode cambiar nos próximos anos co soporte para env()variables. Consulte esta resposta de Stack Overflow para ver algunhas ligazóns útiles. Mentres tanto, podes usar estas variables noutras situacións CSS, así como no teu JavaScript.