父选择器 & 是 Sass 发明的一种特殊选择器，用于 嵌套选择器 中引用外部选择器。它使得可以以更复杂的方式重复使用外部选择器，例如添加 伪类 或在父级之前添加选择器。
当在内部选择器中使用父选择器时，它将被替换为相应的外部选择器。这种情况会取代正常的嵌套行为。
.alert {
// 父选择器可用于向外部选择器添加伪类。
&:hover {
font-weight: bold;
}
// 它还可用于在特定上下文中设置外部选择器的样式，例如设置为使用从右到左语言的主体。
[dir=rtl] & {
margin-left: 0;
margin-right: 10px;
}
// 您甚至可以将其用作伪类选择器的参数。
:not(&) {
opacity: 0.8;
}
}
因为父选择器可以被像h1这样的类型选择器替换，所以它只允许在复合选择器的开头，在复合选择器的开头也允许使用类型选择器。 例如，不允许使用 span&。
不过，我们正在研究放宽此限制。 如果您想帮助实现这一目标，请查看 此 GitHub 问题。
添加后缀 Suffixes
您还可以使用父选择器向外部选择器添加额外的后缀。当使用 BEM 等使用高度结构化类名的方法时，这尤其有用。只要外部选择器以字母数字名称结尾（如类、ID 和元素选择器），您就可以使用父选择器附加其他文本。
.accordion {
max-width: 600px;
margin: 4rem auto;
width: 90%;
font-family: "Raleway", sans-serif;
background: #f4f4f4;
&__copy {
display: none;
padding: 1rem 1.5rem 2rem 1.5rem;
color: gray;
line-height: 1.6;
font-size: 14px;
font-weight: 500;
&--open {
display: block;
}
}
}
In SassScript
父选择器也可以在 SassScript 中使用。它是一个特殊的表达式，以与 选择器函数 相同的格式返回当前父选择器：逗号分隔的列表（选择器列表），其中包含空格分隔的列表（复杂选择器），其中包含未加引号的字符串（复合选择器）。
.main aside:hover,
.sidebar p {
parent-selector: &;
// => ((unquote(".main") unquote("aside:hover")),
// (unquote(".sidebar") unquote("p")))
}
如果在任何样式规则之外使用 & 表达式，则返回 null。由于 null 为 falsey，这意味着您可以轻松使用它来确定样式规则中是否调用了 mixin。
@mixin app-background($color) {
#{if(&, '&.app-background', '.app-background')} {
background-color: $color;
color: rgba(#fff, 0.75);
}
}
@include app-background(#036);
.sidebar {
@include app-background(#c6538c);
}
高级嵌套 Advanced Nesting
您可以将 & 用作普通的 SassScript 表达式，这意味着您可以将其传递给函数或将其包含在插值中 - 甚至在其他选择器中！将其与 选择器函数 和 @at-root 规则 结合使用，可以让您以非常强大的方式嵌套选择器。
例如，假设您想编写一个与外部选择器和元素选择器匹配的选择器。您可以编写一个像这样的混合器，使用 selector.unify() 函数 将 & 与用户的选择器相结合。
@use "sass:selector";
@mixin unify-parent($child) {
@at-root #{selector.unify(&, $child)} {
@content;
}
}
.wrapper .field {
@include unify-parent("input") {
/* ... */
}
@include unify-parent("select") {
/* ... */
}
}
当 Sass 嵌套选择器时，它不知道使用什么插值来生成它们。这意味着即使您使用 & 作为 SassScript 表达式，它也会自动将外部选择器添加到内部选择器。这就是为什么您需要明确使用 @at-root 规则 来告诉 Sass 不要包含外部选择器。