sass禁止在属性名位置使用插值#{$prop}，因其要求属性名必须是编译期确定的静态字符串；正确做法是用@at-root拼接完整声明或改用css自定义属性。
不能直接在属性名位置用 #{$prop} —— Sass 编译器会报 Invalid CSS: was expecting a property name，这不是写法问题，是语法禁止。
为什么 #{$prop}: red 会编译失败
Sass 要求属性名必须是静态字符串，不支持运行时拼接。插值 #{} 虽能用在选择器、属性值、甚至媒体查询里，但唯独不能出现在冒号 : 左侧的属性名位置。这不是疏忽或版本限制，而是设计使然：CSS 属性名需在编译期完全确定，无法“动态解析”。
常见错误现象包括：
- 写成
#{ $prop }: red或#{$prop}: red，空格与否都不行 - 嵌套规则中试图用变量控制
transform/grid-area等属性名，一样报错 - 误以为加个
@if或@each就能绕过，实际只是把错误提前暴露
用 @at-root + #{} 生成整条声明
真正可行的解法，是把插值移到声明外部，用 @at-root 把拼好的整条 CSS 规则“提一层”注入到顶层作用域。
实操要点：
- 先拼出完整字符串，如
$rule: $prop + ": " + $value（注意字符串拼接用+） - 用
@at-root #{ $rule }输出，Sass 会把它当独立 CSS 声明处理 - 必须确保
$prop和$value都是字符串类型；数值要显式转成字符串，比如to-string(2px) - 不支持嵌套上下文继承，
@at-root生成的内容脱离当前选择器作用域
示例：
$prop: "background-color";
$value: "red";
@at-root #{$prop}: #{$value};
输出为：background-color: red;（独立于任何选择器）
更安全的替代方案：用 CSS 自定义属性兜底
如果目标是“让 JS 或主题切换时动态控制某类行为”，硬拼属性名反而增加维护成本。推荐组合使用：
- Sass 变量定义基础值，如
$spacing-xs: 0.25rem - 在
:root中输出对应 CSS 变量：--spacing-xs: #{$spacing-xs} - 属性名保持静态（如
margin），值用var(--spacing-xs) - 需要换肤或运行时调整时，只改 CSS 变量，不碰 Sass 结构
这样既保留 Sass 的编译期可控性，又给运行时留出空间，避免陷入“为了动态而动态”的陷阱。
最容易被忽略的是：插值不是万能胶，它解决不了 CSS 层面的动态性问题。真要响应运行时状态，优先走 CSS 变量 + JS 切换，而不是在 Sass 里强行拼属性名——后者一旦复杂度上升（比如带条件分支、多层嵌套），调试和复现成本会指数级增长。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
