在CSS属性名里直接插值会报错
Sass的#{} 插值语法不能用在属性名位置——比如写成 #{ $prop }: red ，Sass编译器会直接报错 Invalid CSS: was expecting a property name。这不是书写顺序或空格问题，是语法层面禁止：Sass要求属性名必须是静态字符串，不支持运行时拼接。
用@at-root + #{}绕过属性名限制
真正能生效的方式，是把插值移到规则体外部，借助@at-root把动态生成的整条声明“提一层”出来。核心逻辑是：先拼出完整声明字符串，再用@at-root把它当独立规则注入。
常见错误现象：
– 写 #{ $prop }: $val → 编译失败
– 写 #{ $prop }-color: $val → 仅当$prop是纯字符串才有效，无法拼接多个变量
正确做法：
立即学习“前端免费学习笔记（深入）”；
@function gen-prop($prefix, $suffix) {
@return #{$prefix}-#{$suffix};
}
$prop-name: gen-prop("border", "width");
@at-root .box {
#{gen-prop("border", "width")}: 2px;
#{gen-prop("background", "color")}: blue;
}
要点：
– 插值必须包裹在@at-root内部，且作为整个声明的左半边
– 函数返回值必须是字符串（不能是Sass list或map）
– 不支持在同一个@at-root块里用#{}拼选择器和属性名混合内容，会解析混乱
用map-loop批量生成带变量键的规则更安全
手动写一堆@at-root容易漏、难维护。实际项目中更推荐用map存键值对，配合@each遍历生成——本质是把“属性名变量”转为数据结构驱动。
使用场景：
– 生成响应式断点类（如.mt-sm、.mt-md）
– 构建主题色变量映射（--primary-500、--primary-700）
– 输出CSS自定义属性时需要动态前缀
示例：
$spacings: (
"sm": 4px,
"md": 8px,
"lg": 16px
);
@each $key, $val in $spacings {
@at-root .m-#{$key} {
margin: $val;
}
@at-root .p-#{$key} {
padding: $val;
}
}
注意：
– @each遍历时$key是map的key名，天然就是字符串，无需额外to-string()
– 如果map key是数字（如(1: red)），Sass会自动转为字符串；但含连字符的key（如"bg-blue-500"）必须加引号，否则解析失败
– 不要试图在@each里嵌套@at-root再套@at-root，会导致输出重复或作用域错乱
浏览器兼容性与调试陷阱
生成的CSS本身没兼容性问题，但开发阶段容易误判来源：
– DevTools里看到的类名（如.m-sm）查不到Sass源码定位，因为是运行时拼出来的
– 如果插值内容含非法字符（如空格、中文、斜杠），Sass不会报错，但生成的CSS无效，浏览器直接忽略该声明
– 使用!default定义变量时，插值部分不参与默认值回退逻辑，得单独判断变量是否存在
建议：
– 所有用于插值的变量，统一用str-replace()清理非法字符
– 在@at-root前加@debug输出拼接结果，确认字符串符合预期
– 避免在@media查询内部做属性名插值，某些旧版Sass版本会丢弃整个媒体块
插值不是万能的，它只解决“字符串拼接”这一个环节。真要动态控制样式逻辑，优先考虑CSS自定义属性 + JS切换，而不是在Sass里硬凑属性名。
