sass禁止在属性名位置使用#{$prop}插值，因属性名需编译期静态字符串；可行方案是用@at-root拼整条声明，或改用css自定义属性实现运行时动态。
不能在属性名位置直接用 #{$prop}——Sass 编译器会报 Invalid CSS: was expecting a property name，这不是写法疏忽，是语法层禁止。
为什么 #{$prop}: red 一定失败
Sass 要求属性名必须是编译期静态字符串，#{} 插值虽能拼接内容，但只被允许出现在选择器、属性值、@media、calc() 等上下文里，唯独不许出现在冒号左侧。解析器在语法分析阶段就拒绝这种结构，跟变量是否定义、有无空格都无关。
-
.foo { #{$prop}: red; }→ 直接编译中断 -
.foo { #{'border-' + $side}: 1px solid #000; }→ 同样报错 - 哪怕套
@if或@each，也只是把错误提前暴露，无法绕过
真正可行的替代方案：用 @at-root 拼整条声明
把插值移到声明外部，用 @at-root 提升作用域，生成完整规则块。这是目前最通用、兼容性最好的解法。
- 写法示例：
@at-root .box-#{$size} { #{'margin-' + $side}: #{$value}; } - 关键点：
@at-root必须紧贴插值语句，不能嵌套在其他规则内，否则仍会产出嵌套 CSS - 若需批量生成（如所有方向的
padding），配合@each更稳妥：@each $dir in (top, right, bottom, left) { @at-root .pad-#{$dir}-#{$size} { padding-#{$dir}: #{$value}; } }
更现代的出路：改用 CSS 自定义属性
如果目标是“运行时可变”，插值不是正解——它只是编译期字符串拼接。真正动态响应应交给 CSS 变量 + JS 控制。
- 先用插值导出 Sass 变量为 CSS 变量：
:root { --color-primary: #{ $color-primary }; --spacing-md: #{ $spacing-md }; } - 再在样式中使用：
color: var(--color-primary); - 注意：
var(--#{$name})无效——#{}发生在编译期，var()是运行时解析，二者不互通 - 此方案避免了插值类名无法被
@extend、调试无源码映射等问题
最容易被忽略的是：插值产出的是纯字符串，不是“活”的 CSS 结构。你改了 $prop 值，必须重新编译才能更新 CSS 文件；它不参与 DOM 更新，也不和框架响应式系统联动。别把它当 JS 的模板字符串用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
