scss（sass）中 的使用说明

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

---

1. 连接伪类/伪元素

scss

复制

下载

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

编译结果：

css

复制

下载

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

---

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

scss

复制

下载

.menu {&__item {   // 相当于 .menu__itemcolor: red;}&--dark {   // 相当于 .menu--darkbackground: black;}
}

编译结果：

css

复制

下载

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

---

3. 嵌套上下文

scss

复制

下载

.page {.dark-theme & { // 相当于 .dark-theme .pagebackground: #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 命名规范！