Bootstrap 5为何更强调使用CSS原生变量

首先，我们需要明确一个关键观点：Bootstrap 5 中的 CSS 变量并非仅仅是一个“可选项”，而是整个主题系统的核心基石。

这是因为从 Bootstrap 5 开始，Sass 编译阶段的变量（例如 $primary）在运行时实际上已不再有效——它们已经被编译为静态的固定值。所有重要的样式属性，如颜色、间距、圆角、z-index 等，现在都通过 --bs-* 这类原生 CSS 变量暴露出来。而组件的样式（如 .btn-primary）在内部均使用 var(--bs-primary) 进行引用。你无法直接修改 Sass 变量，因为编译后它们便消失了；但只需修改 --bs-primary，按钮、表单、链接、边框等所有相关元素都会立即响应。

为什么不能仅仅修改一个变量就万事大吉？

实际情况远比想象中复杂。Bootstrap 的变量间存在着一种链条式的依赖关系。例如 .btn-outline-primary 这个按钮，它使用的是 var(--bs-primary-rgb)。但 --bs-primary-rgb 并不会因为你修改了 --bs-primary 就自动生成，你需要手动同步设置：

• --bs-primary: #e63946 — 你已设置
• --bs-primary-rgb: 230, 57, 70 — 你也必须手动设置，否则 outline 按钮的背景色会 fallback 到灰色
• 同样地，类似 --bs-primary-text-emphasis、--bs-primary-border-subtle 这样的衍生变量也需要同步设置——遗漏任何一个，都可能导致某些组件的颜色出现错位

最可靠的方法是查阅 bootstrap/scss/_variables.scss 文件，或者直接在浏览器 DevTools 的 Computed 面板中检查你要覆盖的变量是否还被其他变量引用。这才是解决问题的关键所在。

一个经典的“坑”：为什么 JavaScript 改变量，弹出层颜色还是旧的？

你是否尝试过使用 document.documentElement.style.setProperty() 修改全局变量，却发现 Tooltip、Modal 这类弹出层的颜色纹丝不动？

原因其实很简单：Tooltip、Popover、Dropdown-menu 等组件，默认是通过 createPortal（或直接挂载到 body）的方式渲染的。这些组件已经脱离了原始的 DOM 树层级，因此无法继承父容器中设置的 CSS 变量作用域，它们只识别 :root 下的变量值。

那么应该怎么办？

• 若想实现局部生效，必须将变量直接设置在 body 或 document.documentElement 上，而不能仅放在某个 wrapper 的 class 中。
• 若希望实现真正的隔离，则需要配合 data-bs-theme 和自定义属性选择器，例如：[data-bs-theme="card-light"] { --bs-primary: #5a67d8; }，然后强制将弹出层挂载到这个容器内（需要重写 container 选项）。
• 不要指望在触发按钮上添加 style="--bs-primary: red" 就能将变量传递过去——CSS 变量不会透传给 Portal 子树，这一点必须牢记。

一个容易被忽视的陷阱：用 JavaScript 动态修改变量时，计算为什么会出错？

当你在 CSS 中编写 calc(var(--gap) * 2) 却发现不生效时，别着急，这是 CSS 变量本身的限制。CSS 变量本质上是字符串，浏览器不支持直接的数学运算。所有数学表达式都必须包裹在 calc() 函数中，并且乘除号的前后必须保留空格：

width: calc(var(--spacing) * 2);  /* ✅ 正确 */
width: var(--spacing) * 2;       /* ❌ 整条声明被忽略 */
width: calc(var(--spacing)*2);   /* ❌ 缺少空格，部分浏览器解析失败 */

另外需要注意：getComputedStyle(el).getPropertyValue('--my-var') 返回的是一个字符串（包含单位）。在 JavaScript 中进行计算之前，必须使用 parseFloat 或正则表达式从中提取数值——这与 Sass 中的 $size * 2 完全是两种不同的处理方式。

最后，还有一个常被忽略的要点：CSS 变量的“继承性”实际上并非指 DOM 层级上的继承，而是由 CSS 层叠规则所决定的作用域。当你在 .card 中设置了 --bs-primary，它只会影响后代元素中显式使用 var(--bs-primary) 的属性，而无法影响 Bootstrap 内部已经计算好的静态值（例如某些工具类中硬编码的 background-color: #0d6efd）。要确保所有路径都通过变量引用来生效，就需要信任 Bootstrap 5 的源码设计——它确实做到了这一点，但前提是你必须先深入理解其设计逻辑。