近日，一则关于 SASS（Syntactically Awesome Style Sheets）语法错误的讨论在开发者社区引发广泛关注。有开发者反映，在使用嵌套规则时，一段看似合理的代码——& h3, @at-root .Page #{&} section.gallery——在编译阶段触发语法错误，导致样式失效。这一现象不仅让新手困惑，也促使资深前端工程师重新审视 SASS 中 @at-root、插值语法和父选择器 & 的交互逻辑。
错误代码逐层拆解
问题代码的核心结构如下：
// 假设在某元素内嵌套
.some-class {
& h3,
@at-root .Page #{&} section.gallery {
color: red;
}
}
这段代码的意图显然是想同时匹配两个选择器：一是当前父选择器下的 h3 子元素（即 .some-class h3），二是脱离当前嵌套后，在 .Page 类元素内、与当前父选择器名称相同的占位符所对应的 section.gallery。例如，若父选择器为 .some-class，则 #{&} 会被解析为 .some-class，最终生成 .Page .some-class section.gallery。
然而，SASS 编译器（尤其是较新版本）在此处抛出了语法错误。错误信息通常指向 @at-root 后的逗号分隔写法，提示“expected selector”或“mixin or function call expected”。
问题根源：@at-root 与逗号选择器列表的冲突
首先，需要明确 SASS 中 @at-root 的用法。@at-root 指令允许选择器脱离当前嵌套层级，直接输出到文档根部。其标准语法为：
.parent {
@at-root .child { ... } // 输出 .child { ... }
}
当 @at-root 与逗号分隔的选择器列表结合时，情况变得复杂。在 SASS 3.5 之后的版本中，@at-root 支持在括号内传入一个选择器列表（如 @at-root (without: media)），但直接写 @at-root .foo, .bar 这种形式是合法的，它会将两个选择器都提升到根部。然而，问题代码中在 @at-root 后使用了 #{&} 插值，且整个表达式被包含在一个由逗号分隔的列表中——该列表的第一个元素是 & h3，第二个元素是 @at-root .Page #{&} section.gallery。
关键问题在于：SASS 无法正确解析这种混合了普通嵌套选择器与 @at-root 指令的逗号列表。编译器期望每个逗号分隔的部分都是一个独立的选择器，但 @at-root 本身是一个指令，而不是选择器的一部分。将 @at-root 放在逗号之后，相当于在一个选择器列表的中间嵌入了一条指令，这违反了 SASS 的解析规则。
插值 #{&} 的额外陷阱
此外，插值 #{&} 在 @at-root 上下文中也可能引发版本兼容问题。在较旧的 SASS 版本（3.x）中，#{&} 在 @at-root 内部工作正常，会将父选择器文本插入到字符串中。但从 SASS 4.x（Dart Sass 版本）开始，对选择器插值的解析更加严格：若父选择器包含复杂的组合器（如 & 本身代表的是复合选择器），插值可能会产生非预期结果，甚至导致编译失败。例如，当父选择器为 .some-class.is-active 时，#{&} 会输出完整的 .some-class.is-active，而在 @at-root .Page #{&} section.gallery 中，结果可能为 .Page .some-class.is-active section.gallery，这虽然语义正确，但 SASS 解析器在处理逗号分隔的混合列表时，会优先检测语法结构错误，而非插值内容。
如何正确实现需求？
要同时实现“当前父元素下的 h3”和“页面中与父类名相同的 section.gallery”两个规则，推荐两种改写方案：
方案一：分开书写
.some-class {
& h3 {
color: red;
}
@at-root .Page #{&} section.gallery {
color: red;
}
}
这样将两个规则独立成单独的代码块，避免了逗号列表中的指令冲突，也符合 SASS 的嵌套逻辑。
方案二：使用 @extend 或 mixin
若希望保持代码紧凑，可定义一个混合宏，再分别调用：
@mixin red-text {
color: red;
}
.some-class {
& h3 {
@include red-text;
}
@at-root .Page #{&} section.gallery {
@include red-text;
}
}
社区回应与官方建议
针对该问题，SASS 核心维护者在 GitHub 相关 issue 中明确表示：“@at-root 不应作为选择器列表的一部分出现在逗号之后，这是语法设计上的限制。开发者应避免在 @at-root 外部的逗号列表中嵌套 @at-root 指令。” 同时提醒，使用 #{&} 插值时，建议先用 @debug 查看其实际输出，以防版本差异导致的意外报错。
结语
SASS 作为 CSS 预处理器的常青树，其灵活性与强大的嵌套系统深受开发者喜爱，但也容易因语法细节的误解而踩坑。本次 & h3, @at-root .Page #{&} section.gallery 的语法错误，本质是选择器列表与指令混用的边界案例。对于前端开发者而言，理解 @at-root 的设计初衷——仅作用于它所在的那一组选择器——是避免此类错误的关键。在编写复杂嵌套时，优先选择清晰、分离的写法，既能提升可读性，也能规避版本升级带来的兼容风险。随着 Dart Sass 成为主流实现，官方也在逐步收紧解析规则，提醒开发者及时更新知识库，关注官方文档的变更日志。