在 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 命名规范！