SCSS变量仅编译时生效，无法响应运行时主题切换；CSS变量(--xxx)必须通过:root与:root.dark作用域配合class切换实现继承、覆盖和过渡动画。
直接用 SCSS 生成 CSS 变量声明是可行的，但“无缝结合”关键不在编译时，而在运行时变量如何被正确继承、覆盖和响应——:root 必须承载全部主题变量，SCSS 只负责结构化输出，不能替代 class 切换逻辑。
为什么不能只靠 SCSS 混入器动态写 style.setProperty()
SCSS 是编译时工具，生成的是静态 CSS；而深色模式切换是运行时行为。若在 JS 中调用 document.documentElement.style.setProperty('--bg-color', '#121212')，会直接覆盖 CSS 规则，导致：
– @media (prefers-color-scheme: dark) 失效
– 新增颜色变量需同步改 SCSS 和 JS，维护断裂
– 所有过渡动画（如 background-color）因值突变而中断
- 真正该由 SCSS 做的，只是批量生成
:root和:root.dark下的变量声明 - JS 只负责切换
document.documentElement.classList.toggle('dark')，让浏览器自动重算 - 所有颜色插值、过渡、继承都依赖原生 CSS 层级，不是 SCSS 能干预的
:root + .dark 是唯一可靠的作用域组合
SCSS 可以干净地输出两套变量块，但必须确保它们都挂载在 :root 下——这是 CSS 自定义属性能全局生效的唯一位置。例如：
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
:root.dark {
--bg-color: #121212;
--text-color: #e0e0e0;
}
- 写在
.dark或body选择器里，变量只对后代生效，自身无法读取 - Shadow DOM 不继承外部
:root变量，如有 Web Component，需在:host内重复声明 - 不要用
data-theme="dark"替代.dark类——除非你额外写了[data-theme="dark"]选择器
SCSS 主题映射必须配合 class 切换，而非属性切换
很多 SCSS 方案用 [data-theme="dark"] 匹配，看起来灵活，但实际带来兼容隐患：
- 旧版 Safari（iOS 13 以下）对属性选择器 + CSS 变量组合支持不稳定
-
document.documentElement.setAttribute('data-theme', 'dark')触发重绘不如classList可靠 - 无法与
@media (prefers-color-scheme: dark)共存——两者规则优先级易冲突
更稳妥的做法是：SCSS 输出 :root 和 :root.dark，JS 只操作 document.documentElement.classList，初始化时立刻读取 localStorage.getItem('theme') 并设 class，不等 DOMContentLoaded。
过渡动画必须写在默认态，且作用于具体属性
transition: --bg-color 0.3s 完全无效，CSS 不支持对自定义属性做插值。真正起作用的是：
:root {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
:root.dark {
--bg-color: #121212;
--text-color: #e0e0e0;
}
- 过渡声明必须放在非
.dark的基础规则里，否则第一帧无过渡行为 - 如果某元素用
transparent或inherit作为一端值，插值可能中断，建议统一用具体颜色 - 避免对
all过渡，它会拖慢低端设备重绘，只列明需要动的属性
最常被跳过的环节是初始化时机——class 没在首屏渲染前设置，就必然闪屏；而 SCSS 再漂亮，也救不了这一步漏掉的 JS 逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
