scss插值#{}仅是编译期字符串拼接工具，不提供运行时能力；真正实现动态主题切换的是css自定义属性（--xxx），#{}仅在生成这些变量时充当编译期桥梁。
SCSS变量插值（#{} ）本身**不是**实现“运行时动态化渲染”的核心，它只是编译期的字符串拼接工具；真正支撑运行时主题切换的是CSS自定义属性（--xxx），而#{} 只在生成这些CSS变量时起桥梁作用。
SCSS插值发生在编译阶段，不是运行时逻辑
当你写#{$prop}-color: red，SCSS编译器根本不管$prop是不是合法CSS属性名，也不检查浏览器是否支持——它只是把$prop的值（比如"border"）原样塞进去，输出border-color: red。这个过程在你保存文件、触发编译时就完成了，和页面加载、用户操作、JS修改毫无关系。
常见误解是以为#{} 能让CSS“动起来”，其实它连JS都不认识，更不会响应document.body.setAttribute('data-theme', 'dark')这类操作。
- 编译后CSS里看不到
$或#{}，只有纯静态规则 - 插值不产生任何运行时开销，但也不能带来任何运行时能力
- 想让颜色随用户点击实时变？必须靠
:root { --bg-color: #fff }+ JS改style.setProperty
插值真正不可替代的三个场景
它解决的是“怎么把变量塞进CSS语法不允许放变量的地方”——这些位置，光靠$var直接写死会报错或无效：
-
选择器中嵌入变量：如
.icon-#{$type}，$type: "warning"→ 编译为.icon-warning；写成.icon-$type则被当作字面量选择器，无效 -
属性名含动态部分：如
#{$prefix}-transition，$prefix: "webkit"→-webkit-transition；直接写$prefix-transition会被当成一个叫“$prefix-transition”的非法属性 -
URL路径拼接：如
background: url(#{$img-path}/#{$name}.png)；路径带变量时，不加#{}无法展开
注意：color: $color这种属性值插值，绝大多数情况可省略#{} ——因为SCSS默认就支持变量直接作为值使用。
用插值生成CSS变量时，最容易漏掉的关键点
很多人用#{} 把SCSS变量注入到:root里，比如：
:root {
--bg-color: #{$light-bg};
--text-color: #{$light-text};
}
[data-theme="dark"] :root {
--bg-color: #{$dark-bg};
--text-color: #{$dark-text};
}
这看起来没问题，但实际部署常翻车：
-
[data-theme="dark"] :root规则必须在:root之后加载，否则会被覆盖（顺序错了就切不动主题） - 所有分支（light/dark）必须定义**完全相同的一组变量名**，哪怕值一样；缺一个，比如
--border-color没在dark里声明，那用var(--border-color)的地方就会回退到initial或继承值 -
$dark-bg如果未定义或为空，#{$dark-bg}会输出空字符串，导致--bg-color: ;——CSS解析失败，整条规则失效
插值真正的价值，是让你能用一套SCSS变量，批量产出多套CSS变量定义；但它本身不参与运行时，也不做任何校验——写错名字、拼出非法字符、漏定义变量，SCSS全都不拦，只默默输出错误CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
