如何在Bootstrap中使用CSS变量

Bootstrap v5.2.0-beta1在:root ，并在我们所有的核心组件中增加了大量的CSS自定义属性，或CSS变量。下面我们来看看你如何在你的项目中利用它们。

有了CSS变量，你现在可以比以前更容易地定制Bootstrap，而且不需要CSS预处理程序。Sass的所有功能仍然存在于幕后，但CSS变量为未来增加了大量的功能。使用和组成新的值，全局更新样式而不需要重新编译，设置回退值，设置新的颜色模式，以及更多。

让我们深入了解一下。

CSS变量？

它们的正式名称是自定义属性，但由于它们最直接的用例是设置特定的值，所以经常被称为CSS变量。如果你需要一个入门知识，可以考虑阅读MDN的CSS自定义属性文章或CSS技巧指南。

简而言之，CSS变量允许你命名经常使用的值。例如，你可以设置--purple: #6f42c1 ，而不是到处写#6f42c1 。然后你就可以在以后用var() 函数来使用这个变量。

:root {
  --purple: #6f42c1;
}
.custom-element {
  color: var(--purple);
}

我们在Bootstrap中使用CSS变量来设置许多全局性的属性值，在我们的组件和一些实用工具中。

变量组

当我们谈论Bootstrap中的CSS变量时，我们指的是三个主要组别。

根变量 全局范围的变量，可用于:root 元素（通常是<html> ），可被整个DOM中的任何元素访问。
组件变量专门针对每个组件的变量，通常在组件的基类上，以及它们的修改器类和Sass混合元素上。
实用变量在其他实用类中作为修改器使用。

无论它们在哪里，我们所有的CSS变量都以--bs- 为前缀，因此你知道它们来自哪里，以及它们如何在混合了Bootstrap的CSS和其他自定义样式的代码库中使用。你还会注意到，我们没有把所有的组件变量放在根层。这使得CSS变量的范围只限于其预期的使用情况，防止全局:root 范围内的变量被污染。

还值得一提的是，围绕着CSS变量还有两项更大的工作要做。

在我们所有的表单中添加CSS变量
增加更多细微的全局主题变量和对颜色模式的支持，如黑暗模式。

这些可能会在v5.3.0（v5.2.0稳定后的下一个小版本）中出现，所以在此同时，请查看GitHub repo以了解事情的发展情况。

根部变量

Bootstrap有大量的根变量，我们只会在未来的更新中为上述的颜色模式支持增加更多变量。截至本帖，我们在:root 元素上有以下CSS变量。

颜色—所有命名的颜色、灰色和主题颜色。这也包括我们所有的$theme-colors ，其格式为rgb 。
主体字体样式—从font-size 到color 以及更多的东西，都应用于我们的<body> 元素。
共享属性—用于我们认为是主题特定的属性-值配对，如链接颜色和边框样式。

根CSS变量在Bootstrap的其他部分被广泛使用，允许你在全局层面上轻松覆盖我们的默认样式。例如，如果你想调整我们组件的默认border-radius 和链接颜色，你可以覆盖几个变量，而不是写新的选择器。

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

你甚至可以使用其他根变量来覆盖这些值。

// custom.css
:root {
  --bs-border-radius: var(--bs-border-radius-lg);
  --bs-link-color: var(--bs-gray-800);
}

如果没有CSS变量，你就必须使用像Sass这样的预处理器，或者为所有组件的这些属性的每个实例编写新的选择器。前者相对容易，后者则不太容易。CSS变量有助于解决这个问题。

组件变量

在我们的组件上，CSS变量获得了更大的定制能力。在我们的文档侧边栏的组件部分，几乎所有的东西现在都有CSS变量可供你使用。

Scrollspy和关闭按钮没有相关的CSS变量，所以这里不包括它们。

在我们的文档中，你会发现通过覆盖CSS变量来定制我们的默认组件的例子。一个很好的例子来自于我们自己的文档，我们写了自己的按钮样式来创建一个紫色的按钮。

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

它看起来像这样。

另一个很好的例子是来自我们的工具提示。你可以在Bootstrap中用data-bs-custom-class="custom-tooltip" ，为工具提示和弹出窗口添加自定义类。然后，通过一个CSS变量，你可以改变工具提示的背景和箭头颜色。

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

这看起来像这样。

在我们的组件中，有几十个CSS变量在发挥作用。所有这些都在相关文档页面的一个新章节中被引用。例如，这里是我们的模态CSS变量。这是在所有的Sass变量、混合变量、循环和每个组件使用的地图之外的。

实用变量

并非每一个实用程序类都使用CSS变量，但那些使用的实用程序类获得了大量的权力和定制。背景、边框和颜色工具都有我们所说的 “局部CSS变量”，以提高其实用性。它们中的每一个都使用CSS变量来定制rgba() 颜色的alpha透明度值。

考虑一下我们的背景颜色实用工具，.bg-* 。默认情况下，每个实用程序类都有一个局部变量，--bs-bg-opacity ，默认值为1 。要改变背景实用程序的阿尔法值，你可以用你自己的样式，或一些新的.bg-opacity-* 实用程序覆盖这个值。

<div class="p-3 bg-success bg-opacity-25">
  ...
</div>

下面是应用了我们所有的.bg-opacity-* 类后，.bg-success 的样子。

而同样的情况也适用于边框颜色的不透明度 (--bs-border-opacity 和.border-opacity-*) 和文字颜色的不透明度 (--bs-text-opacity 和.text-opacity-*) 。现在，这些工具可以提供许多颜色选项。

默认情况下，我们为这些不同的不透明度工具提供了五个值。

类别名称	阿尔法值
`.text-opacity-10`
`.bg-opacity-10`
`.border-opacity-10`	`.1`
`.text-opacity-25`
`.bg-opacity-25`
`.border-opacity-25`	`.25`
`.text-opacity-50`
`.bg-opacity-50`
`.border-opacity-50`	`.5`
`.text-opacity-75`
`.bg-opacity-75`
`.border-opacity-75`	`.75`
`.text-opacity-100`
`.bg-opacity-100`
`.border-opacity-100`	`1`

期待更多的CSS变量进入我们的实用工具。实时定制有很大的力量，即使是我们认为不可改变的样式。

🌱 宋玉の数字花园

探索

最近的笔记

micro-app

micromark

qiankun

如何在Bootstrap中使用CSS变量

CSS变量？

变量组

根部变量

组件变量

实用变量

关系图谱

目录

反向链接