Sass中插值#{}不能直接用于选择器开头，必须前置固定符号（如.、#）且不可用+拼接；正确方式是@at-root配合已知前缀使用，或封装为带校验的mixin。
插值语句 #{} 不能直接拼接选择器主体
很多人以为写 .class-#{$suffix} 就能生成 .class-header 这类动态类名，但 Sass 在编译期会报错：「Invalid CSS after “.class-”: expected class name」。这是因为 Sass 要求选择器开头必须是合法标识符（如字母、下划线），而 #{$suffix} 在解析阶段尚未展开，Sass 不允许它作为选择器的“起始部分”参与语法分析。
必须用 @at-root + & 配合插值才能安全生成嵌套类名
真正可行的方式是把插值放在已存在的选择器内部，借助 & 引用父级，并用 @at-root 提升作用域。否则插值只会被当作普通字符串字面量处理，无法形成有效 CSS 规则。
常见错误写法：
@each $type in (primary, secondary, success) {
.btn-#{$type} { color: red; } // ❌ 编译失败
}
正确写法：
立即学习“前端免费学习笔记（深入）”；
@each $type in (primary, secondary, success) {
@at-root .btn-#{$type} {
color: map-get($colors, $type);
}
}
-
@at-root让规则脱离当前嵌套上下文，避免生成类似.parent .btn-primary的意外结构 -
#{$type}此时处于选择器中间位置（前有固定字符串.btn-），Sass 允许展开 - 若需带命名空间或 BEM 格式，可写成
.#{$ns}#{$sep}#{$block}#{$sep}#{$element}，但所有前置固定部分（如点号、连字符）必须显式写出
插值在属性值里完全可用，但在选择器里受语法约束
别混淆使用场景：#{} 在声明块内（如 content: "#{$value}" 或 background: $color-map.#{$key}）是自由的；但一旦进入选择器位置，就受限于 CSS 语法和 Sass 解析阶段的校验逻辑。
这些写法都合法：
$prefix: "icon";
.#{$prefix}-home { display: inline-block; }
@for $i from 1 through 3 {
.col-#{$i} { width: 100% / $i; }
}
但这些会失败：
#{$prefix}-item { ... } // ❌ 缺少点号，不是合法类选择器
.#{$prefix + "-item"} { ... } // ❌ + 操作符在选择器中不被支持
- Sass 不支持在选择器中做字符串拼接运算（
+、str-slice等函数均无效） - 变量必须是纯字符串，且前面要有明确的 CSS 选择器符号（
.、#、[attr=等） - 若变量含空格或特殊字符（如
$name: "my class"），插值后会导致 CSS 语法错误，务必提前清理
动态类名更适合用 @mixin 封装 + 参数校验
直接裸写 @each + @at-root 容易失控，尤其当类名来源来自 map 或外部配置时。更稳健的做法是封装成 mixin，加入类型判断和 fallback。
@mixin gen-button-classes($map: $button-colors) {
@if type-of($map) == 'map' {
@each $type, $color in $map {
@at-root .btn-#{$type} {
background-color: $color;
&:hover { background-color: darken($color, 10%); }
}
}
} @else {
@warn "Expected a map for button colors, got #{type-of($map)}";
}
}
- 避免传入 null 或 list 导致静默失败
- 命名空间冲突风险高（比如多个模块都生成
.btn-primary），建议加前缀：.#{$ns}-btn-#{$type} - 如果目标是运行时动态切换（如 JS 控制 class），插值毫无意义——那是 JS 该干的事，Sass 只负责编译期静态生成
最常被忽略的一点：插值生成的类名是静态的，不会随 JS 数据变化；真要“动态”，得换思路——用 CSS 自定义属性 + JS 控制，而不是靠 Sass 插值硬编码一堆类。
