Sass中属性名不支持插值，仅允许在属性值和选择器中使用#{}；替代方案是用map+@each遍历输出，或封装为mixin处理动态逻辑。
插值不能直接用于CSS属性名
Sass的#{} 插值语法在属性名位置（即冒号左边）是**不被允许的**，编译时会报错 Invalid CSS after "...": expected "{", was "color: red;"。这不是写法问题，而是Sass语法限制——属性名必须是静态字符串，不能动态生成。
用map + @each模拟动态属性映射
真正可行的替代方案是把“属性名→值”的关系存进$map，再用@each遍历输出。适合批量生成类似margin-top、padding-left这类有规律的属性：
$spacings: (
"margin-top": 8px,
"margin-bottom": 16px,
"padding-left": 24px
);
@each $prop, $val in $spacings {
#{$prop}: $val;
}
编译后就是标准CSS，无运行时开销。注意：$prop必须是字符串字面量（带引号），否则Sass会尝试解析为变量名。
需要真·动态拼接时，用#{}只作用于值或选择器
插值安全可用的场景只有两个：属性值、选择器（包括伪类/伪元素）。例如：
立即学习“前端免费学习笔记（深入）”；
- 拼接颜色值：
background-color: #{$prefix}-primary;（前提是$prefix已定义为"blue"之类） - 生成BEM修饰符：
.btn--#{$theme} { color: red; } - 组合媒体查询断点：
@media (min-width: #{$breakpoint-mobile}) { ... }
但绝不能写成#{$prop-name}: #{$value}——即使$prop-name是字符串变量，Sass也不接受。
复杂逻辑建议抽离到函数中返回完整声明块
如果拼接逻辑较重（比如根据方向、尺寸、状态三重组合生成border-top-color），硬塞插值容易失控。更稳的做法是封装成函数，返回@content或使用@mixin：
@mixin border-side($side, $color, $width: 1px) {
border-#{$side}-color: $color;
border-#{$side}-width: $width;
border-#{$side}-style: solid;
}
.example { @include border-side("top", #007bff); }
这种写法既保持可读性，又规避了属性名插值的语法禁区。关键点在于：把“动态”控制在Sass允许的边界内——值、选择器、Mixin参数，而不是试图突破属性名的静态约束。
真正难的不是怎么写插值，而是分清哪些地方Sass根本不让你动。属性名就是那条线。
