scss变量不能直接赋值给css自定义属性，必须用#{$value}插值；因$primary是编译期符号而非字符串，--color-primary: $primary会被视为非法标识符报错，而#{$primary}将其展开为合法css值。
直接用 #{$value} 插值即可，但必须确保 Map 的 key 是字符串字面量、value 是合法 CSS 值，否则编译失败或输出无效 CSS。
为什么 --color-primary: $primary 会报错？
SCSS 变量不能直接出现在 CSS 属性值位置，它不是字符串，而是编译期符号。写成 --color-primary: $primary 会被当成未定义标识符处理，Sass 编译器直接报错 Invalid CSS。
- ✅ 正确写法：
--color-primary: #{$primary}—— 插值把变量“展开”为实际值 - ❌ 错误写法：
--color-primary: $primary或--color-primary: "$primary"（后者输出的是字面字符串） - ⚠️ 注意：如果
$primary是函数调用（如darken($blue, 10%)），插值后仍是合法 CSS 颜色值；但若它依赖未定义变量或计算出 null，编译会中断
@each 遍历 Map 生成自定义属性的正确姿势
目标是把 $theme-colors: ("primary": #007bff, "success": #28a745) 批量转成 :root { --color-primary: #007bff; --color-success: #28a745; }。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- key 必须用双引号包裹（
"primary"），否则@each $key, $value in $theme-colors中的$key是未定义变量 - 属性名拼接要用插值：
--color-#{$key}，漏掉{}就变成字面量--color-$key - value 直接插值：
#{$value}，不要额外套引号或inspect() - 完整示例：
:root {<br> @each $key, $value in $theme-colors {<br> --color-#{$key}: #{$value};<br> }<br>}
Map value 含透明度或函数时怎么安全处理？
比如 "primary": rgba(#007bff, 0.9) 或 "warning": mix(#ff6b35, #fff, 20%)，这些在插值后仍能生成合法 CSS，但要注意：
- rgba() 和 mix() 在 Sass 编译期就计算完毕，插值输出的是最终颜色（如
rgba(0, 123, 255, 0.9)），没问题 - 但如果 value 是嵌套 Map（如
("color": #007bff, "alpha": 0.9)），直接#{$value}会输出(color: #007bff, alpha: 0.9)—— 非法 CSS 值，必须先解构 - 安全做法：只让 Map 的 value 是原子值（颜色、长度、数字），复杂结构提前 resolve 成 CSS 可接受类型
- 避免在 Map 里存函数调用链（如
lighten(darken($base, 5%), 3%)），调试困难且易触发单位/类型错误
生成后 JS 读不到自定义属性？检查这三点
编译后的 CSS 确实写了 --color-primary，但 JS getComputedStyle(document.documentElement).getPropertyValue('--color-primary') 返回空字符串，常见原因：
- 没加
:root选择器前缀，而是写在某个组件作用域里（如.card { --color-primary: ... }），变量仅在该元素内生效 - 多个
:root块被覆盖：后加载的 CSS 会覆盖先定义的同名变量，注意打包顺序 - SCSS 文件没被 import 到主入口（如
main.scss），导致规则根本没进最终 CSS 文件
真正容易被忽略的是：Map 本身不校验 value 合法性，"error": null 或 "size": 12（缺单位）插值后会产出 --size: 12 —— 这在 CSS 中是无效声明，浏览器静默丢弃，DevTools 里也看不到。务必在 Map 定义时就约束类型，或用 @if type-of($value) == 'color' 做守卫。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
