插值#{}能动态生成属性名，因SCSS编译器在编译期直接字符串拼接，如border-#{$side}-color且$side:top时输出border-top-color；必须用#{}的场景包括选择器嵌入变量、属性名含动态部分、URL路径拼接。
插值 #{} 为什么能动态生成属性名
因为 SCSS 编译器在解析时，会把 #{$var} 中的变量值原样“展开”并拼接到上下文里，不加空格、不转义、不校验合法性——它只管字符串拼接。所以当你写 border-#{$side}-color，且 $side: top，就真能输出 border-top-color。这不是运行时逻辑，而是编译期文本替换。
哪些地方必须用 #{} 才能生效
以下三类场景不用插值就无法实现：
- 选择器中嵌入变量（如
.icon-#{$type}） - 属性名含动态部分（如
#{$prop}-color、font-#{$weight}） - URL 路径拼接（如
url(#{$img-path}#{$name}.png)）
注意：background: #{$color} 这种属性值插值，其实多数情况可省略 #{} （直接写 $color 即可），但属性名本身不能省——CSS 不认识 $prop-color 这种写法，必须靠 #{} 拆开。
常见翻车点：空格、作用域和命名冲突
插值看似简单，实际踩坑集中在三处：
-
#{$prop}-#{$side}: red中，-前后**不能有空格**，否则编译出border - top - color，浏览器直接忽略 - 变量必须已定义且在作用域内，
@mixin内部使用外部变量需确认是否被遮蔽（比如 mixin 参数名和全局变量同名） - 拼出来的属性名可能非法，例如
$prop: "123"; #{$prop}-color→123-color，CSS 不允许数字开头的选择器或属性名，但 SCSS 不报错，只静默输出
和 CSS 自定义属性（--xxx）不是一回事
有人误以为插值是给 CSS 变量赋值的手段，其实完全无关：#{} 发生在编译阶段，产出的是静态 CSS；而 --xxx 是运行时浏览器解析的自定义属性。你不能用 #{} 动态生成 --my-var 的名字再 var(--my-var)，因为后者名字必须字面量写死。插值只解决“写什么 CSS”，不解决“运行时怎么变”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
