scss变量不能直接赋值给css变量，必须用#{$var}插值；@use命名空间下不支持点号访问插值；多主题中插值不校验空格、null或非法字符，需手动处理。
SCSS变量不能直接变成CSS变量
写 --color: $primary-color 是无效的，编译后会原样输出这行 CSS，浏览器报错或忽略。SCSS 变量只存在于编译阶段，CSS 变量必须是运行时可读的字符串值，两者生命周期不重叠——中间必须靠插值 #{$primary-color} 桥接。
必须用 #{$var} 插值才能注入 :root
在 :root 或主题选择器里定义 CSS 变量时，属性值部分必须显式包裹插值：
$primary-color: #3498db;:root { --primary-color: #{$primary-color}; }- 如果值来自 map，得用
#{map-get($theme, primary)}，不能写--c: $theme.primary
漏掉 #{} 就等于把 SCSS 变量名当字面量输出，比如 --c: $primary-color → 浏览器看到的是无效的 --c: $primary-color，不是颜色值。
@use 命名空间下无法直接插值
用 @use '_variables' as v 后，#{v.$primary-color} 会编译失败——SCSS 不支持在插值中用点号访问命名空间变量。
- 错误：
@use '_variables' as v; :root { --c: #{v.$primary-color}; } - 正确做法：在
_variables.scss内部就完成:root { --c: #{$primary-color}; }声明 - 或导出为局部变量：
$exported-primary: $primary-color;，再在调用处插值#{$exported-primary}
多主题场景下别拼错选择器结构
生成 :root[data-theme="dark"] 这类规则时，插值只管值，不管选择器合法性。常见翻车点：
-
[data-theme="#{$mode}"]中$mode: "dark "（末尾带空格）→ 输出[data-theme="dark "]，匹配失败 -
$mode: null或未定义 → 插值为空字符串，生成[data-theme=""]，语义错乱 - 主题名含非法字符（如
$mode: "light-blue"）没问题，但若写成$mode: "1-dark"，CSS 选择器虽合法，JS 切换时可能因格式不统一出 bug
真正容易被忽略的是：插值不校验、不报错、不 trim、不转义——它只是字符串缝合工，你给什么，它就吐什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
