Variables CSS

Bootstrap inclúe preto de dúas ducias de propiedades personalizadas de CSS (variables) no seu CSS compilado, con ducias máis en camiño para mellorar a personalización por compoñente. 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-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 compoñentes

Tamén estamos comezando a facer uso de propiedades personalizadas como variables locais para varios compoñentes. Deste xeito, podemos reducir o noso CSS compilado, asegurarnos de que os estilos non se herdan en lugares como táboas aniñadas e permitir 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 .

Tamén estamos a usar variables CSS nas nosas cuadrículas, principalmente para canaletas, con máis uso de compoñentes no futuro.

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);
}