CSS 变量

Bootstrap 在其编译的 CSS 中包含许多CSS 自定义属性（变量），用于实时自定义，而无需重新编译 Sass。在浏览器的检查器、代码沙箱或一般原型设计中工作时，这些提供了对常用值的轻松访问，例如我们的主题颜色、断点和主要字体堆栈。

我们所有的自定义属性都带有前缀bs-以避免与第三方 CSS 冲突。

根变量

以下是我们包含的变量（注意:root是必需的），可以在加载 Bootstrap 的 CSS 的任何地方访问。它们位于我们的_root.scss文件中并包含在我们编译的 dist 文件中。

默认

这些 CSS 变量随处可用，与颜色模式无关。

:root {
    scroll-behavior: smooth;
  }

组件变量

Bootstrap 5 越来越多地使用自定义属性作为各种组件的局部变量。通过这种方式，我们减少了编译的 CSS，确保样式不会在嵌套表格等地方继承，并允许在 Sass 编译后对 Bootstrap 组件进行一些基本的重新样式化和扩展。

查看我们的表格文档，了解我们如何使用 CSS 变量。从 v5.2.0 开始，我们的导航栏也使用 CSS 变量。我们还在我们的网格中使用 CSS 变量——主要用于新的可选 CSS 网格的列间距——未来会有更多的组件使用。

只要有可能，我们就会在基本组件级别分配 CSS 变量（例如，.navbar用于导航栏及其子组件）。这减少了对自定义位置和方式的猜测，并允许我们的团队在未来的更新中轻松修改。

前缀

大多数 CSS 变量使用前缀来避免与您自己的代码库发生冲突。前缀--是每个 CSS 变量所需前缀。

通过Sass $prefix变量自定义前缀。默认情况下，它设置为bs-（注意结尾的破折号）。

例子

CSS 变量提供与 Sass 变量类似的灵活性，但在提供给浏览器之前不需要编译。例如，这里我们使用 CSS 变量重置页面的字体和链接样式。

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

网格断点

虽然我们将网格断点包含为 CSS 变量（除了xs），但请注意CSS 变量在媒体查询中不起作用。这是 CSS 变量规范中的设计，但在未来几年可能会随着对env()变量的支持而改变。查看此 Stack Overflow 答案以获得一些有用的链接。同时，您可以在其他 CSS 情况下以及在 JavaScript 中使用这些变量。