应优先使用--primary-color，仅在需编译期计算、条件分支或生成静态值时才用$primary-color；前者支持运行时动态更新，后者仅限构建阶段生效。
什么时候该用 $primary-color，而不是 --primary-color
预处理器变量（如 Sass 的 $primary-color）在编译时就被替换成具体值，无法运行时修改；CSS 变量（--primary-color）保留在最终 CSS 中，可通过 JS 或媒体查询动态更新。所以：
– 需要主题切换、暗色模式、用户偏好响应时，必须用 --primary-color；
– 仅用于构建期逻辑计算（比如生成一整套间距 scale、颜色变体），用 $spacing-xs 更安全高效；
– 混合宏里做条件判断（如 @if $size == 'large'）只能靠预处理器变量，var() 不支持逻辑分支。
如何让 $color 自动注入到 :root 中生成 --color
直接在 Sass 文件里写 :root { --color: #{$color}; } 是最常见做法，但要注意：
– 必须确保变量已定义且作用域可达（避免局部 $color 在 :root 外部不可见）；
– 若变量来自另一个文件（如 _theme.scss），需先 @use 或 @import；
– 不要重复定义同名 CSS 变量（例如多个 :root 块写 --color），后者会覆盖前者，但无警告；
– 推荐把所有这类注入集中在一个 _css-vars.scss 文件里，避免散落导致维护困难。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
var(--color) 在内联 style 中失效的常见原因
HTML 内联样式里写 style="color: var(--color)" 看似合理，但经常不生效，原因有：
– --color 未在祖先元素（尤其是 :root）中定义，而内联样式不继承自父级 CSS 变量声明；
– 声明顺序问题：CSS 文件加载晚于 HTML 渲染，变量还没注册就尝试读取；
– 拼写错误或大小写敏感（--Color ≠ --color）；
– 使用了 fallback 但写法错误，比如 var(--color, red) 是对的，var(--color, #f00) 也合法，但 var(--color red) 会直接失效且无报错。
为什么不要在 Sass 里嵌套 var() 计算
Sass 编译器不认识 var()，它只是字符串，不会提前解析或校验：
– width: calc(#{$base} * 2 + var(--gap)) 会被原样输出，Sass 不检查 --gap 是否存在；
– 如果你试图用 $base 和 var(--gap) 做混合运算，浏览器会因类型不匹配（数字 vs 函数调用）静默失败；
– 正确做法是：纯数值计算放 Sass 侧（calc(#{$base} * 2)），动态部分全交给 CSS 变量（calc(var(--base) * 2 + var(--gap))）；
– 所有涉及 var() 的表达式，必须放在最终 CSS 层，不能依赖预处理器插值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
