SCSS插值#{}是编译期字面量拼接而非运行时动态生成，.#{ $name }报错因解析器要求选择器必须以字母、下划线或&开头，而#{$name}在语法分析阶段未展开，被视为非法空起始；.btn-#{$type}合法因前缀满足起始要求。
SCSS 字符串插值（#{} ）不是“动态选择器生成器”，它只是编译期的字面量拼接——你看到的选择器名，是编译时就固定下来的字符串，不是运行时根据 JS 状态变化的。
为什么 .#{$name} 会报错而 .btn-#{$type} 可以用
SCSS 解析器在语法分析阶段就拒绝以 #{$var} 开头的选择器。它要求选择器必须以字母、下划线或 & 起始，而插值块在解析时尚未展开，被视为空起始。错误信息通常是：Invalid CSS after ".": expected selector, was "#{"。
-
.btn-#{$type}合法：前缀.btn-满足起始要求，#{$type}在其后作为安全拼接段 -
.#{$name}非法：开头无合法标识符，直接被 parser 拦截 - 补救方案只有两个：用
@each循环确保前缀存在，或用@at-root+ 显式拼接（如@at-root .#{ $name } { ... }），但后者会丢失嵌套上下文
带破折号、数字开头的变量值必须 quote()
如果变量值含非法 CSS 标识符字符（如 "max-sm"、"2xl"），直接插值会导致 Sass 把 - 当减号、把 2xl 当未定义变量，报错 Undefined variable "max" 或静默产出无效类名。
- 正确写法：
.text-#{ quote($key) }→ 输出.text-"max-sm"（引号是 CSS 合法类名的一部分） - 不想带引号？那就约束变量源：只允许字母开头、不含破折号的键名，比如用
sm替代max-sm，再靠命名约定映射语义 -
quote()不解决浏览器匹配问题：.text-"max-sm"可被document.querySelector('.text-"max-sm"')匹配，但多数 CSS 工具链（如 Tailwind 的 class-sorter）会警告
& 和 #{} 混用时的常见翻车点
& 是父选择器完整展开结果，#{} 是字符串拼接，二者机制完全不同，混用极易产出意料外的选择器结构。
立即学习“前端免费学习笔记（深入）”；
-
.card { &__header { &__title { ... } } }→ 编译为.card__header__title，但 DOM 中__title通常不是__header的子元素，而是同级或更浅层级 -
.btn { &:hover { .icon-#{$state} { ... } } }→ 输出.btn:hover .icon-primary（后代关系），而非 BEM 要求的扁平类名.btn--hover .icon-primary - 想生成
.btn--primary:hover？得写成.btn--#{$state} { &:hover { ... } }，不能把&和#{}套在同一个选择器里乱叠
插值选择器无法被 @extend 引用
@extend 只接受字面量选择器，不接受任何含 #{} 的表达式。写 @extend .btn-#{$state} 会直接报错：Invalid CSS after "@extend .btn-": expected "}", was "#{$state}"。
- 后果是：插值生成的类名只能靠重复声明或
@mixin复用，无法参与样式继承链 - 若需类似 BEM 修饰符复用，必须提前枚举所有可能的
$state值，用@each为每个生成独立类，并在内部对基类做@extend - 调试困难：编译后的 CSS 没有源码映射，你看到的
.text-"2xl"找不到对应 SCSS 行号
最易被忽略的是：插值产出的是静态字符串，和 DOM、JS 状态完全无关。改了变量值，必须重新编译才能更新 CSS 文件；它不响应 props、不监听 classList 变化，也不和任何前端框架的响应式系统联动。
