CSS变量支持运行时动态修改并实时生效，而SCSS变量仅在编译时替换、无法响应式更新；二者作用时机与机制根本不同。
CSS变量不能直接在SCSS中赋值或运算，必须用var()显式引用；SCSS变量只是编译时占位符，改它不会触发页面样式重绘。
为什么$primary-color: #007aff不能替代--primary-color
SCSS变量（如$primary-color）在Webpack/Vite构建时就被替换成固定值，打包后CSS里根本不存在$符号。你改$primary-color的值，除非重新编译+刷新页面，否则对运行中的页面零影响。
CSS变量（--primary-color）是浏览器原生支持的运行时机制，JS可随时调用document.documentElement.style.setProperty('--primary-color', '#ff3b30')修改，所有background-color: var(--primary-color)会立刻响应。
- 常见错误：在
_variables.scss里写$bg: var(--bg-color)——这会导致编译报错或生成无效CSS - 正确做法：SCSS只负责把预设值“倒进”CSS变量，例如
--bg-color: #{$bg-light} - SCSS中
var()只能当普通字符串用，不能参与lighten()、mix()等函数计算
@import顺序决定:root变量是否可被覆盖
主题切换依赖选择器优先级。如果你把暗色模式变量写在:root之后的独立文件里，但@import顺序靠前，那暗色规则永远不生效。
立即学习“前端免费学习笔记（深入）”；
推荐结构：
// styles/theme.scss
@import 'variables'; // 定义 $light-bg, $dark-bg 等 SCSS 变量
:root {
--bg-color: #{$light-bg};
--text-color: #{$light-text};
}
[data-theme="dark"] :root {
--bg-color: #{$dark-bg};
--text-color: #{$dark-text};
}
- 务必确保
[data-theme="dark"] :root的CSS规则在:root之后加载，否则会被覆盖 - 不要用
.dark .button { --color: red }——变量作用域缩到.button内部，其他组件读不到 - 所有主题分支都必须定义**全部**变量，哪怕值相同，否则未定义变量会回退到
inherit或initial
在Vue/UniApp中安全更新--xxx的两种方式
直接操作document.documentElement.style最简单，但在小程序平台（尤其微信旧基础库）可能受限；用dataset切换data-theme更稳定、兼容性更好。
- 推荐方案（持久化+跨平台）：
document.documentElement.dataset.theme = 'dark'+localStorage.setItem('ui-theme', 'dark') - 慎用方案：
document.documentElement.style.setProperty('--bg-color', '#121212')——H5有效，但部分小程序不支持动态设置:root样式 - 初始化必须做两件事：从
localStorage读取上次主题 + 立即写入dataset.theme，漏掉任一环节都会导致首屏闪动或刷新丢失 - Vue组件内避免用
:style="{ '--bg-color': theme.bg }"绑定单个变量——维护成本高，且无法利用[data-theme]的批量覆盖能力
暗色模式下容易被忽略的5类CSS变量
只改--bg-color和--text-color远远不够。这些边界元素不响应变量，用户会明显感知“换肤不彻底”：
-
--border-color：表单边框、卡片分割线 -
--shadow-color：按钮投影、弹窗阴影（别用rgba(0,0,0,0.1)硬编码） -
--form-placeholder-color：输入框提示文字 -
--scrollbar-thumb-color：滚动条滑块（需配合scrollbar-color属性） -
--svg-fill：图标SVG的fill值，常被写死在内联样式里
真正可靠的换肤，是让每个视觉原子都依赖同一个变量源——不是靠JS挨个改，而是靠CSS变量自动渗透到所有var(--xxx)调用点。这点一旦漏掉，后续维护成本会指数级上升。
