<p>Bootstrap 5 的 CSS 变量是主题逻辑唯一载体，所有组件样式依赖 --bs-* 变量（如 --bs-primary、--bs-primary-rgb），需手动同步衍生变量；Portal 渲染的弹出层只继承 :root 变量，局部覆盖须配合 data-bs-theme 或挂载到目标容器。</p>
Bootstrap 5 的 CSS 变量不是“可选功能”，而是主题逻辑的唯一载体
因为 Bootstrap 5 彻底移除了 Sass 编译期变量（如 $primary）在运行时的影响力——所有颜色、间距、圆角、z-index 都通过 --bs-* 变量暴露，且组件样式（如 .btn-primary）内部全部用 var(--bs-primary) 引用。你改不了 Sass 变量，它早被编译成静态值了；但改 --bs-primary，按钮、表单、链接、边框立刻响应。
为什么不能只改 --bs-primary 就完事？
Bootstrap 的变量之间存在链式依赖，比如 .btn-outline-primary 用的是 var(--bs-primary-rgb)，而 --bs-primary-rgb 并非自动生成，必须手动同步设置：
-
--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 面板，确认你要覆盖的变量是否被其他变量引用。
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"写在触发按钮上——变量不会透传给 Portal 子树
用 JS 动态改变量时，calc(var(--gap) * 2) 报错？
CSS 变量本质是字符串，浏览器不支持裸运算。所有数学表达式必须包裹在 calc() 里，且乘除号前后要有空格：
width: calc(var(--spacing) * 2); /* ✅ 正确 */ width: var(--spacing) * 2; /* ❌ 整条声明被忽略 */ width: calc(var(--spacing)*2); /* ❌ 缺少空格，部分浏览器解析失败 */
另外，getComputedStyle(el).getPropertyValue('--my-var') 返回的是字符串（含单位），做 JS 计算前得用 parseFloat 或正则提取数值——这点和 Sass 的 $size * 2 完全不同。
真正容易被忽略的点：CSS 变量的“继承性”不是 DOM 层级继承，而是 CSS 层叠规则决定的作用域。你在 .card 里设 --bs-primary，只影响它后代中显式用 var(--bs-primary) 的属性，不影响 Bootstrap 内部已计算好的静态值（比如某些 utility 类的 background-color: #0d6efd 是硬编码）。要确保所有路径都走变量引用，就得信任 Bootstrap 5 的源码设计——它确实做到了这点，但你得先看清它怎么写的。
