Variáveis ​​CSS

Bootstrap inclui muitas propriedades customizadas CSS (variáveis) em seu CSS compilado para customização em tempo real sem a necessidade de recompilar 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-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;
}

Variáveis ​​de componentes

O Bootstrap 5 está cada vez mais fazendo uso de propriedades personalizadas como variáveis ​​locais para vários componentes. Dessa forma, reduzimos nosso CSS compilado, garantimos que os estilos não sejam herdados em locais como tabelas aninhadas e permitimos alguns reestilização e extensão básicas 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 . Nossas navbars também usam variáveis ​​CSS a partir da v5.2.0. Também estamos usando variáveis ​​CSS em nossas grades - principalmente para calhas, a nova grade CSS opcional - com mais uso de componentes no futuro.

Sempre que possível, atribuiremos variáveis ​​CSS no nível do componente base (por exemplo, .navbarpara navbar e seus subcomponentes). Isso reduz a adivinhação sobre onde e como personalizar e permite modificações fáceis por nossa equipe em atualizações futuras.

Prefixo

A maioria das variáveis ​​CSS usa um prefixo para evitar colisões com sua própria base de código. Esse prefixo é um acréscimo ao --que é necessário em todas as variáveis ​​CSS.

Personalize o prefixo por meio da $prefixvariável Sass. Por padrão, é definido como bs-(observe o traço à direita).

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.