css变量运行时生效，scss变量仅编译时可用，二者机制不兼容；mix()等函数无法处理var(--xxx)，因scss无法解析运行时字符串；换肤应由js动态设置:root变量，scss仅生成初始模板。
CSS变量必须在运行时生效，SCSS变量只能编译时用——混着写会直接报错或失效，别指望mix()能接收var(--primary-color)。
为什么不能在SCSS里直接用var(--xxx)调颜色函数
SCSS的mix()、lighten()、rgba()等函数只接受编译期确定的颜色值（比如#3b82f6或$primary），而var(--primary-color)是浏览器运行时才解析的字符串，SCSS编译器根本认不出它是个颜色。
常见错误现象：SassError: argument $color-2 of mix() must be a color。
这不是写法问题，是底层机制冲突——SCSS跑在构建阶段，CSS变量跑在浏览器阶段，两者不交叠。
SCSS只负责生成初始变量，换肤靠JS改:root上的style
正确分工是：SCSS定义一套“模板”，把所有可变色抽成占位符；最终值由JS注入:root。例如：
:root {
--primary-color: #{map-get($theme, primary)};
--bg-color: #{map-get($theme, bg)};
}
其中$theme是SCSS map，不同主题对应不同map，编译后输出多套静态CSS变量声明。但注意：这些只是默认值，上线后用户点击换肤，实际生效的是：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
document.documentElement.style.setProperty('--primary-color', '#8b5cf6');- 不要改
body.className去触发class-based主题，否则第三方组件内联样式会失效 - 避免在
:root里写!important，它会阻断JS动态设置
衍生色必须用JS算，别想让SCSS代劳
深色模式下需要--primary-light、--primary-fade等衍生值？SCSS没法基于var(--primary-color)实时计算。必须用JS做颜色转换：
- 用
tinycolor2或原生hsl()转换：比如hsl(240, 100%, 70%)生成浅色 - 换肤时批量设置：一次设
--primary-color、--primary-light、--border-alpha等整组变量 - 存到
localStorage里，页面重载后用getComputedStyle(document.documentElement).getPropertyValue('--primary-color')读取并恢复
兼容性兜底和作用域陷阱要提前踩
安卓5.0 WebView、IE11完全不支持CSS变量，var(--x)会回退到默认值或空白——这不是bug，是特性缺失。如果必须兼容：
- 用
postcss-css-custom-properties插件做编译时降级（仅适用于静态主题，无法支持用户手动切换） - 检查
document.documentElement.style.setProperty是否可用，不可用时fallback到class切换方案 -
:root上设变量才全局有效，写在.app里会导致子组件var(--x)取不到值 - 第三方UI库（如uView、NutUI）若没暴露CSS变量接口，得手动覆盖其硬编码颜色，别指望
var()自动穿透
真正麻烦的不是怎么写，而是怎么让var(--x)在所有地方都生效——它看起来像魔法，其实每一步都依赖正确的DOM作用域、JS执行时机和浏览器支持度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
