SassError: expected selector 常因嵌套错误或缺少父选择器导致

Question

在使用 Sass 编写样式时，常遇到“SassError: expected selector”错误，主要因嵌套规则书写不当或缺少父选择器 `&` 导致。例如，在嵌套伪类或BEM命名中忘记使用 `&` 连接父级，如 `.btn {.hover { ... } }` 会错误解析为子元素而非伪类。正确应为 `&:hover`。此外，空的嵌套块或误将属性写成选择器也会触发该错误。确保语法规范、合理使用 `&` 可有效避免此类问题。

Answer 1

1. SassError: expected selector 错误的常见表现

在使用 Sass 编写样式时，开发者常遇到编译错误：“SassError: expected selector”。该错误提示通常出现在以下几种场景中：

• 嵌套规则中遗漏了父选择器符号 &
• 将 CSS 属性误写为选择器（如写成 color { ... }）
• 存在空的嵌套块（如 .btn { } 无内容）
• 伪类或伪元素未正确连接父级（如 .btn { :hover { } }）
• BEM 命名中子元素或修饰符未使用 & 连接

2. 深入解析：Sass 中的嵌套机制与 & 的作用

Sass 允许通过嵌套方式组织 CSS 规则，提升可读性和维护性。然而，其核心逻辑依赖于 & 符号来引用父选择器。当省略 & 时，Sass 会将其解释为后代选择器。

错误写法	正确写法	说明
.btn { .hover { color: red; } }	.btn { &:hover { color: red; } }	前者生成 .btn .hover，后者生成 .btn:hover
.block { __element { } }	.block { &__element { } }	BEM 中应使用 & 连接 block 和 element
div { margin { top: 10px; } }	div { margin-top: 10px; }	margin 是属性，不能作为选择器嵌套

3. 典型错误案例分析

以下是几个典型引发 “expected selector” 的代码片段及其解析：

// 案例一：伪类缺失 &
.btn {
  :hover {
    background: blue;
  }
}
// 编译失败：:hover 不是合法选择器前缀

// 案例二：BEM 结构错误
.card {
  __title {
    font-size: 1.2em;
  }
}
// 解析为 .card .__title，非预期的 .card__title

// 案例三：空嵌套块
.nav {
  .dropdown {

  }
}
// 虽不总报错，但易被误用导致后续语法混乱
    

4. 解决方案与最佳实践

为避免此类问题，建议遵循以下开发规范：

1. 所有伪类和伪元素必须使用 &:pseudo 形式，如 &:hover, &::before
2. BEM 命名中，使用 &__element 和 &--modifier 确保命名连贯
3. 避免将 CSS 属性（如 display, margin）作为嵌套选择器
4. 删除空的嵌套规则，保持结构清晰
5. 启用 lint 工具（如 stylelint）进行静态检查
6. 使用现代编辑器（VS Code + Sass 插件）获得实时语法提示

5. 构建流程中的预防机制

在大型项目中，仅靠人工检查难以杜绝语法错误。可通过自动化手段增强稳定性：

// package.json 中配置 stylelint 规则示例
{
  "stylelint": {
    "rules": {
      "selector-pseudo-class-no-unknown": true,
      "no-empty-source": true,
      "indentation": 2
    }
  }
}
    

6. 可视化流程：Sass 编译错误排查路径

当出现 “expected selector” 错误时，可按以下流程图进行排查：

graph TD
            A[Sass 编译报错: expected selector] --> B{是否存在嵌套?}
            B -->|否| C[检查是否误将属性作选择器]
            B -->|是| D[检查是否使用 & 连接父级]
            D --> E{是否为伪类/伪元素?}
            E -->|是| F[确认使用 &:hover / &::before]
            E -->|否| G[是否为 BEM 命名?]
            G --> H[使用 &__elem 或 &--mod]
            C --> I[修正语法]
            F --> I
            H --> I
            I --> J[重新编译验证]