CSS变量不能真正替代Sass变量，因前者仅支持运行时视觉微调且需手动同步RGB、文本色等衍生变量，后者通过编译源头控制可生成工具类、删减组件、修改断点逻辑，二者解决不同层级问题。
不能真正替代。CSS 变量只能改部分视觉表现，且必须手动同步 RGB、文本色、深色模式等衍生变量；而 Sass 编译是源头控制，能生成新工具类、删减组件、修改断点逻辑——两者解决的是不同层级的问题。
为什么直接改 --bs-primary 按钮变色了但焦点环还是蓝的
因为 .btn-primary:focus 用的是 box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .5)，你只改了 --bs-primary，没同步设 --bs-primary-rgb，浏览器 fallback 到默认值 13, 110, 253（即原蓝色）。同理，--bs-primary-text-emphasis 控制文字色，--bs-primary-border-subtle 控制边框浅色，漏一个就断裂。
- 必须成组设置：
--bs-primary、--bs-primary-rgb、--bs-primary-text-emphasis、--bs-primary-border-subtle - RGB 值要手动转：比如
#e63946→230, 57, 70，不能靠 JS 自动解析（CSS 不支持） - 深色模式下，
data-bs-theme="dark"会读--bs-primary-dark等独立变量，你设的--bs-primary完全不生效
:root 里写变量却没覆盖成功？检查加载顺序和作用域
Bootstrap 的 bootstrap.min.css 文件末尾已定义了一次 :root { --bs-primary: #0d6efd; ... }。如果你的自定义 :root 样式在它之前加载，就会被覆盖。
- 确保
<style>或自定义 CSS 文件在<link rel="stylesheet" href="bootstrap.min.css">之后引入 - 别写成
.my-theme { --bs-primary: #8b5cf6; }——CSS 变量不继承自普通 class，必须用:root或html - 多个
:root块时，后出现的会覆盖前面的；检查 DevTools 的 Styles 面板，确认你的声明是否被划掉
想运行时切换主题？别碰 $primary，用 JS 动态设 document.documentElement.style.setProperty
Sass 变量 $primary 在编译后就消失了，JS 根本读不到也改不了。只有 CSS 变量能在运行时响应。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：
document.documentElement.style.setProperty('--bs-primary', '#8b5cf6'); - 必须同时设 RGB：
document.documentElement.style.setProperty('--bs-primary-rgb', '139, 92, 246'); - 如果用了深色模式，还得触发
data-bs-theme="dark"并设对应 dark 变量，否则切换后颜色错乱 - 注意：这种切换不会生成新工具类（如
.bg-navy），也不会影响.alert-primary的文字色（它是 Sass 编译时硬编码的）
最常被忽略的不是怎么写变量，而是变量之间隐含的依赖链——改一个，不补全 RGB 和 text-emphasis，UI 就会出现“按钮红了、阴影蓝了、文字黑得看不见”的割裂感。真换肤，要么走 Sass 编译彻底接管，要么用 JS 把整套变量链都管住，没有中间路线。
