父选择器

父选择器 & 是 Sass 发明的特殊选择器，在 嵌套选择器 中用于引用外部选择器。它使得以更复杂的方式重用外部选择器成为可能，例如添加 伪类 或在父选择器之前添加选择器。

当内部选择器中使用父选择器时，它将被相应的外部选择器替换。这种情况发生而不是正常的嵌套行为。

¥When a parent selector is used in an inner selector, it’s replaced with the corresponding outer selector. This happens instead of the normal nesting behavior.

Playground

SCSS Syntax

.alert {
  // The parent selector can be used to add pseudo-classes to the outer
  // selector.
  &:hover {
    font-weight: bold;
  }

  // It can also be used to style the outer selector in a certain context, such
  // as a body set to use a right-to-left language.
  [dir=rtl] & {
    margin-left: 0;
    margin-right: 10px;
  }

  // You can even use it as an argument to pseudo-class selectors.
  :not(&) {
    opacity: 0.8;
  }
}
Playground

Sass Syntax

.alert
  // The parent selector can be used to add pseudo-classes to the outer
  // selector.
  &:hover
    font-weight: bold


  // It can also be used to style the outer selector in a certain context, such
  // as a body set to use a right-to-left language.
  [dir=rtl] &
    margin-left: 0
    margin-right: 10px


  // You can even use it as an argument to pseudo-class selectors.
  :not(&)
    opacity: 0.8

CSS Output

.alert:hover {
  font-weight: bold;
}
[dir=rtl] .alert {
  margin-left: 0;
  margin-right: 10px;
}
:not(.alert) {
  opacity: 0.8;
}

⚠️ Heads up!

由于父选择器可以被类型选择器（如 h1）替换，因此仅允许在复合选择器的开头，其中也允许使用类型选择器。例如，不允许使用 span&。

¥Because the parent selector could be replaced by a type selector like h1, it’s only allowed at the beginning of compound selectors where a type selector would also be allowed. For example, span& is not allowed.

不过，我们正在考虑放宽这一限制。如果你想帮助实现这一目标，请查看 这个 GitHub 问题。

¥We’re looking into loosening this restriction, though. If you’d like to help make that happen, check out this GitHub issue.

添加后缀添加后缀 permalink

¥Adding Suffixes

你还可以使用父选择器向外部选择器添加额外的后缀。当使用像 BEM 这样使用高度结构化类名的方法时，这特别有用。只要外部选择器以字母数字名称结尾（如类、ID 和元素选择器），你就可以使用父选择器附加其他文本。

¥You can also use the parent selector to add extra suffixes to the outer selector. This is particularly useful when using a methodology like BEM that uses highly structured class names. As long as the outer selector ends with an alphanumeric name (like class, ID, and element selectors), you can use the parent selector to append additional text.

Playground

SCSS Syntax

.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;
    }
  }
}
Playground

Sass Syntax

.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

CSS Output

.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: #f4f4f4;
}
.accordion__copy {
  display: none;
  padding: 1rem 1.5rem 2rem 1.5rem;
  color: gray;
  line-height: 1.6;
  font-size: 14px;
  font-weight: 500;
}
.accordion__copy--open {
  display: block;
}

在 SassScript 中在 SassScript 中 permalink

¥In SassScript

父选择器也可以在 SassScript 中使用。这是一个特殊的表达式，以 选择器功能 使用的相同格式返回当前父选择器：一个逗号分隔的列表（选择器列表），其中包含空格分隔的列表（复杂选择器），其中包含不带引号的字符串（复合选择器）。

¥The parent selector can also be used within SassScript. It’s a special expression that returns the current parent selector in the same format used by selector functions: a comma-separated list (the selector list) that contains space-separated lists (the complex selectors) that contain unquoted strings (the compound selectors).

Playground

SCSS Syntax

.main aside:hover,
.sidebar p {
  parent-selector: &;
  // => ((unquote(".main") unquote("aside:hover")),
  //     (unquote(".sidebar") unquote("p")))
}
Playground

Sass Syntax

.main aside:hover,
.sidebar p
  parent-selector: &
  // => ((unquote(".main") unquote("aside:hover")),
  //     (unquote(".sidebar") unquote("p")))

CSS Output

.main aside:hover,
.sidebar p {
  parent-selector: .main aside:hover, .sidebar p;
}

如果 & 表达式在任何样式规则之外使用，则返回 null。由于 null 是 虚假的，这意味着你可以轻松地使用它来确定是否在样式规则中调用 mixin。

¥If the & expression is used outside any style rules, it returns null. Since null is falsey, this means you can easily use it to determine whether a mixin is being called in a style rule or not.

Playground

SCSS Syntax

@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);
}
Playground

Sass Syntax

@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)

CSS Output

.app-background {
  background-color: #036;
  color: rgba(255, 255, 255, 0.75);
}

.sidebar.app-background {
  background-color: #c6538c;
  color: rgba(255, 255, 255, 0.75);
}

高级嵌套高级嵌套 permalink

¥Advanced Nesting

你可以将 & 用作普通的 SassScript 表达式，这意味着你可以将其传递给函数或将其包含在插值中 - 甚至在其他选择器中！将它与 选择器功能 和 @at-root 规则 结合使用可以让你以非常强大的方式嵌套选择器。

¥You can use & as a normal SassScript expression, which means you can pass it to functions or include it in interpolation—even in other selectors! Using it in combination with selector functions and the @at-root rule allows you to nest selectors in very powerful ways.

For example, suppose you want to write a selector that matches the outer selector and an element selector. You could write a mixin like this one that uses the selector.unify() function to combine & with a user’s selector.

Playground

SCSS Syntax

@use "sass:selector";

@mixin unify-parent($child) {
  @at-root #{selector.unify(&, $child)} {
    @content;
  }
}

.wrapper .field {
  @include unify-parent("input") {
    /* ... */
  }
  @include unify-parent("select") {
    /* ... */
  }
}
Playground

Sass Syntax

@use "sass:selector"

@mixin unify-parent($child)
  @at-root #{selector.unify(&, $child)}
    @content



.wrapper .field
  @include unify-parent("input")
    /* ... */

  @include unify-parent("select")
    /* ... */

CSS Output

.wrapper input.field {
  /* ... */
}

.wrapper select.field {
  /* ... */
}

⚠️ Heads up!

当 Sass 嵌套选择器时，它不知道使用什么插值来生成它们。这意味着即使你使用 & 作为 SassScript 表达式，它也会自动将外部选择器添加到内部选择器。这就是为什么你需要显式使用 @at-root 规则 来告诉 Sass 不要包含外部选择器。

¥When Sass is nesting selectors, it doesn’t know what interpolation was used to generate them. This means it will automatically add the outer selector to the inner selector even if you used & as a SassScript expression. That’s why you need to explicitly use the @at-root rule to tell Sass not to include the outer selector.