CSS variablesCSS变量

Bootstrap includes many CSS custom properties (variables) in its compiled CSS for real-time customization without the need to recompile Sass. Bootstrap在其编译的CSS中包含许多CSS自定义属性（变量），用于实时定制，而无需重新编译Sass。These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s inspector, a code sandbox, or general prototyping.当在浏览器的检查器、代码沙盒或常规原型中工作时，可以轻松访问常用值，如主题颜色、断点和主字体堆栈。

All our custom properties are prefixed with bs- to avoid conflicts with third party CSS.我们所有的自定义属性都以bs-为前缀，以避免与第三方CSS冲突。

Root variables根变量

Here are the variables we include (note that the :root is required) that can be accessed anywhere Bootstrap’s CSS is loaded. 下面是我们包含的变量（注意:root是必需的），可以在加载Bootstrap的CSS的任何地方访问这些变量。They’re located in our _root.scss file and included in our compiled dist files.它们位于我们的_root.scss文件中，并包含在我们编译的dist文件中。

: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-rgb: 33, 37, 41;
--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;
}

Component variables组成变量

We’re also beginning to make use of custom properties as local variables for various components. 我们也开始使用自定义属性作为各种组件的局部变量。This way we can reduce our compiled CSS, ensure styles aren’t inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.通过这种方式，我们可以减少已编译的CSS，确保样式不会在嵌套表之类的位置继承，并允许在Sass编译之后对Bootstrap组件进行一些基本的重新序列化和扩展。

Have a look at our table documentation for some insight into how we’re using CSS variables.请查看我们的表格文档，了解如何使用CSS变量。

We’re also using CSS variables across our grids—primarily for gutters—with more component usage coming in the future.我们还在网格中使用CSS变量，主要用于将来组件使用量更多的沟槽。

Examples例子

CSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser. CSS变量提供了与Sass变量类似的灵活性，但在提供给浏览器之前不需要编译。For example, here we’re resetting our page’s font and link styles with CSS variables.例如，这里我们用CSS变量重置页面的字体和链接样式。

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

Grid breakpoints网格断点

While we include our grid breakpoints as CSS variables (except for xs), be aware that CSS variables do not work in media queries. 虽然我们将网格断点包括为CSS变量（xs除外），但请注意CSS变量在媒体查询中不起作用。This is by design in the CSS spec for variables, but may change in coming years with support for env() variables. 这是CSS规范中针对变量的设计，但随着对env()变量的支持，未来几年可能会发生变化。Check out this Stack Overflow answer for some helpful links. 查看此堆栈溢出答案以获得一些有用的链接。In the mean time, you can use these variables in other CSS situations, as well as in your JavaScript.同时，您可以在其他CSS情况下以及在JavaScript中使用这些变量。