sass 不允许在属性名位置直接插值，因为解析器要求冒号左侧必须是静态标识符；#{$prop}-color 可行是因整个片段处于属性名上下文，而 #{$prop}: red 中插值出现在需 ident 的语法位置，违反语法规则。
不能在属性名位置直接写 #{$prop}: red，Sass 会报 Invalid CSS: was expecting a property name —— 这不是写法问题，是语法禁止。
为什么 #{$prop}-color 可以，但 #{$prop}: red 不行
Sass 插值 #{} 本质是编译期字符串拼接，不校验 CSS 合法性。所以：border-#{$side}-color 能拼出 border-top-color，因为整个片段属于选择器/属性名上下文，Sass 只负责“粘起来”；
而 #{$prop}: red 中的 #{$prop} 出现在冒号左侧，Sass 解析器要求此处必须是静态标识符（ident），不允许表达式介入。
常见错误现象：
- 写成
#{ $prop }: red或#{$prop}: red，空格与否都报错 - 在嵌套规则里用
@each循环生成#{$key}: $val，照样失败 - 以为加个
@if包一层就能绕过，结果只是提前暴露语法错误
@at-root + #{} 拼整条声明才有效
真正能落地的做法，是把插值移到声明外部，用 @at-root 把拼好的完整 CSS 规则“提一层”输出。
实操要点：
- 先拼字符串：
$rule: $prop + ": " + $value（注意用+拼接，不是空格） - 确保类型正确：数值要转字符串，比如
to-string(2px)，否则拼出来是width: 2px→width: 2 px（多空格） - 用
@at-root #{$rule}输出，它脱离当前选择器作用域，变成顶层 CSS 声明 - 不能依赖嵌套上下文，
@at-root内部访问不到父级变量，需提前传入或定义在全局
示例：
$prop: "background-color";
$value: "red";
@at-root #{$prop}: #{$value};
输出：background-color: red;（独立于任何选择器）
选择器插值比属性名插值自由得多
类名、伪类、响应式断点类这些场景，#{} 完全可用，但有硬约束：
- 必须嵌套在
@each、@mixin或规则块内，不能在 SCSS 文件顶层直接写.#{$name} - 含特殊字符（如
@）必须双层插值：#{"@#{$name}"}，否则@#{$name}被解析为伪类 - 破折号命名要显式写出：
.btn-#{$type}✅，.btn #{$type}❌（空格变后代选择器） - 变量值含空格或引号需清理：
str-trim($type)或约定输入不含空格 - 数字开头的类名（如
.123-mod）CSS 会忽略，Sass 不报错，得靠人工校验
别指望插值解决运行时动态需求
插值发生在编译阶段，产出的是静态 CSS。如果你真正想要的是 JS 控制样式、主题切换或用户偏好适配，硬拼属性名反而增加维护成本。
更合理的替代路径：
- 用 CSS 自定义属性（
--my-var）配合 JS 设置，浏览器原生支持 - 把动态逻辑交给 JS class 切换，SCSS 只管预设好所有可能的类（如
.bg-primary/.bg-secondary） - 避免在
@extend中使用插值 ——@extend .btn-#{$state}直接报错，不支持运行时引用
最易被忽略的一点：插值不校验合法性。拼出 123-color 或 margin- top（中间空格）这种无效 CSS，Sass 照常输出，浏览器静默忽略，调试时很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
