不能在scss中直接用var(--primary-color)参与mix()、lighten()等函数计算，因scss编译时无法解析运行时css变量，仅能通过#{}插值将sass变量注入:root默认值，动态换肤须由js批量设置整组css变量。
不能在 SCSS 中直接用 var(--primary-color) 当作颜色参数参与 mix()、lighten() 等函数计算——编译阶段根本解析不了运行时变量，报错是必然的。
SCSS 只能生成初始 CSS 变量，不能读取或运算它们
你写的 $color: var(--primary-color) 在 SCSS 编译时会被当作字符串字面量，不是颜色值。Sass 编译器不执行 JS，也不解析 var() 的实际值，所以 mix($color, #fff) 必然触发 SassError: argument $color-2 of mix() must be a color。
-
var(--x)是浏览器运行时才求值的，SCSS 运行在构建阶段，两者时间线完全错开 - 所有颜色衍生（如
--primary-light、--primary-fade）必须由 JS 完成，比如用tinycolor2.lighten()或原生hsl()转换 - SCSS 唯一能做的，是把主题色“模板”输出为
:root中的默认值，例如：:root { --primary-color: #4a6fa5; }
JS 动态设置变量时，别漏掉整套衍生色
只改 --primary-color 不够——组件里可能还依赖 --primary-light 或 --border-alpha，这些不会自动推导出来。
- 换肤时用 JS 一次性批量设置整组变量：
document.documentElement.style.setProperty('--primary-color', '#8b5cf6')、document.documentElement.style.setProperty('--primary-light', '#c084fc')等 - 避免在
:root里写!important，它会阻断style.setProperty()的生效 - 读取当前值要用
getComputedStyle(document.documentElement).getPropertyValue('--primary-color')，别在 DOM 加载前就调用
深色模式优先走 @media (prefers-color-scheme: dark)
系统级深色模式不该靠 JS 或 class 切换，否则首屏闪动、第三方组件样式失效风险高。
- 在 SCSS 中这样写：
:root { --bg-color: #f8fafc; }@media (prefers-color-scheme: dark) { :root { --bg-color: #0f172a; } } - 确保
@media规则在:root之后，且构建工具没把它移除（检查最终 CSS 是否保留该媒体查询） - 不要用
$theme == 'dark'这类 SCSS 条件判断——它编译时就固定了，无法响应用户系统偏好变化
真正容易被忽略的是：所有变量必须在 :root 全局声明，且每个主题分支都要定义全部变量（哪怕值相同），否则未定义变量会回退到 inherit 或 initial，导致样式断裂。这不是 JS 逻辑问题，是 CSS 作用域和继承规则本身决定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
