scss（sass）中 & 的使用说明

BillKu2025-06-08 13:54

在 SCSS（Sass）中，& 符号是一个父选择器引用，它代表当前嵌套规则的外层选择器。主要用途如下：

1. 连接伪类/伪元素

scss

复制

下载

复制代码

.button {
  background: blue;
  &:hover {  // 相当于 .button:hover
    background: darkblue;
  }
  &::after { // 相当于 .button::after
    content: ">";
  }
}

编译结果：

css

复制

下载

复制代码

.button {
  background: blue;
}
.button:hover {
  background: darkblue;
}
.button::after {
  content: ">";
}

2. 串联选择器（BEM 风格命名）

scss

复制

下载

复制代码

.menu {
  &__item {   // 相当于 .menu__item
    color: red;
  }
  &--dark {   // 相当于 .menu--dark
    background: black;
  }
}

编译结果：

css

复制

下载

复制代码

.menu__item {
  color: red;
}
.menu--dark {
  background: black;
}

3. 嵌套上下文

scss

复制

下载

复制代码

.page {
  .dark-theme & { // 相当于 .dark-theme .page
    background: #333;
  }
}

编译结果：

css

复制

下载

复制代码

.dark-theme .page {
  background: #333;
}

4. 避免重复书写父选择器

scss

复制

下载

复制代码

.card {
  &-header { ... }  // .card-header
  &-body { ... }    // .card-body
  &-footer { ... }  // .card-footer
}

⚠️ 注意事项

& 必须写在选择器开头 ：&hover（错误）❌ → &:hover（正确）✅
深层嵌套时 ：& 会引用完整的选择器链：

scss

复制

下载
复制代码
```
.a {
  .b & { // 编译为 .b .a
  }
}
```

总结

场景	示例	编译结果
伪类	`&:hover`	`.parent:hover`
BEM 命名	`&__item`	`.parent__item`
修改上下文	`.context &`	`.context .parent`
简化重复前缀	`&-suffix`	`.parent-suffix`

合理使用 & 能让 SCSS 代码更简洁、可读性更强，特别适合组件化开发和 BEM 命名规范！