Variáveis ​​CSS

Bootstrap inclui muitas propriedades customizadas de CSS (variáveis) em seu CSS compilado para customização em tempo real sem a necessidade de recompilar o Sass. Eles fornecem acesso fácil a valores comumente usados, como nossas cores de tema, pontos de interrupção e pilhas de fontes primárias ao trabalhar no inspetor do navegador, uma caixa de proteção de código ou prototipagem geral.

Todas as nossas propriedades personalizadas são prefixadasbs- para evitar conflitos com CSS de terceiros.

Variáveis ​​raiz

Aqui estão as variáveis ​​que incluímos (observe que :rooté obrigatório) que podem ser acessadas em qualquer lugar que o CSS do Bootstrap seja carregado. Eles estão localizados em nosso _root.scssarquivo e incluídos em nossos arquivos 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;
}

Variáveis ​​de componentes

Também estamos começando a usar propriedades personalizadas como variáveis ​​locais para vários componentes. Dessa forma, podemos reduzir nosso CSS compilado, garantir que os estilos não sejam herdados em locais como tabelas aninhadas e permitir algumas reestilizações básicas e extensão dos componentes do Bootstrap após a compilação do Sass.

Dê uma olhada em nossa documentação de tabela para algumas dicas sobre como estamos usando variáveis ​​CSS .

Também estamos usando variáveis ​​CSS em nossas grades - principalmente para calhas - com mais uso de componentes no futuro.

Exemplos

As variáveis ​​CSS oferecem flexibilidade semelhante às variáveis ​​do Sass, mas sem a necessidade de compilação antes de serem servidas ao navegador. Por exemplo, aqui estamos redefinindo a fonte da nossa página e os estilos de link com variáveis ​​CSS.

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

Pontos de interrupção da grade

Embora incluamos nossos pontos de interrupção de grade como variáveis ​​CSS (exceto xs), esteja ciente de que as variáveis ​​CSS não funcionam em consultas de mídia . Isso ocorre por design na especificação CSS para variáveis, mas pode mudar nos próximos anos com suporte para env()variáveis. Confira esta resposta do Stack Overflow para obter alguns links úteis. Enquanto isso, você pode usar essas variáveis ​​em outras situações de CSS, bem como em seu JavaScript.