SCSS变量不能直接赋值给CSS自定义属性，必须用#{$var}插值；因SCSS变量属编译期，CSS变量属运行时，二者机制不互通，直接写--color: $primary会导致声明被静默丢弃。
SCSS变量不能直接赋值给CSS自定义属性（--var），必须用#{} 插值包裹，否则编译会静默丢弃或报错。
SCSS变量无法直接写入:root中的--*
这是最常踩的坑：SCSS变量是编译期概念，而--*是运行时CSS机制，两者不互通。写成--color: $primary;看似合理，实际编译后该行消失或变成无效CSS。
-
$primary: #3498db;是SCSS变量，只在Sass编译阶段存在 -
:root { --primary: $primary; }中的$primary不会被解析，Sass认为这是非法值，直接跳过整条声明 - 浏览器DevTools里根本看不到这条
--primary，调试时容易误判为“变量没生效”，其实是压根没生成
必须用#{} 做字符串插值
#{} 是Sass唯一能将SCSS变量“注入”到CSS原生语法中的方式，它把变量值转为纯字符串拼接到输出中。
- 正确写法：
:root { --primary: #{$primary}; } - 支持嵌套变量：
$spacing-xs: 4px; :root { --space-xs: #{$spacing-xs}; } - 支持表达式：
:root { --line-height: #{1.5 * 1}; }（注意：这里仍是Sass计算，不是CSScalc()） - 不要多加空格：
# { $primary }（带空格）会失效，必须是#{$primary}
和CSS var() 混用时的陷阱
你可能想用SCSS变量生成var()默认值，比如color: var(--text, $fallback);——这不行。var()是运行时函数，Sass无法在编译期替换成$fallback的值。
- 错误：
color: var(--text, $fallback);→ 编译失败，Sass不识别var()内参数为变量上下文 - 可行但不推荐：
color: var(--text, #{$fallback});→ 会编译成color: var(--text, #3498db);，失去CSS变量的动态性 - 真正动态的做法：把
$fallback也定义为--fallback，再用var(--text, var(--fallback))
为什么不用@property或env()替代？
@property需要手动注册类型且不兼容旧浏览器；env()仅限环境变量（如safe-area-inset）。它们和SCSS变量完全无关，也不能解决“SCSS → CSS变量”的转换问题。
真正要小心的是：插值出来的值一旦写死，就失去了CSS变量的响应能力。如果后续想通过JS修改--primary，得确保所有用到它的地方都基于var(--primary)，而不是直接用了#{$primary}生成的静态值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
