Родительский селектор

Родительский селектор & - это специальный селектор, изобретенный Sass, который используется в вложенных селекторах для ссылки на внешний селектор. Это позволяет повторно использовать внешний селектор более сложными способами, например, добавляя псевдокласс или добавление селектора перед родителем.

Когда родительский селектор используется во внутреннем селекторе, он заменяется соответствующим внешним селектором. Это происходит вместо обычного поведения вложения.

SCSS Syntax

.alert {
  // Родительский селектор можно использовать для добавления псевдоклассов во внешний селектор.
  &:hover {
    font-weight: bold;
  }

  // Его также можно использовать для стилизации внешнего селектора в определенном контексте,
  // например, для основного текста, использующего язык с письмом справа налево.
  [dir=rtl] & {
    margin-left: 0;
    margin-right: 10px;
  }

  // Вы даже можете использовать его как аргумент для селекторов псевдоклассов.
  :not(&) {
    opacity: 0.8;
  }
}

⚠️ Внимание!

Поскольку родительский селектор может быть заменен селектором типа, таким как h1, он разрешен только в начале составных селекторов, где также разрешен селектор типа. Например, использование span& недопустимо.

Тем не менее, мы планируем ослабить это ограничение. Если вы хотите помочь в этом, ознакомьтесь с этой проблемой GitHub.

Добавление суффиксов permalinkДобавление суффиксов

Вы также можете использовать родительский селектор для добавления дополнительных суффиксов к внешнему селектору. Это особенно полезно при использовании такой методологии, как БЭМ, в которой используются хорошо структурированные имена классов. Пока внешний селектор заканчивается буквенно-цифровым именем (например, селекторы классов, идентификаторов и элементов), вы можете использовать родительский селектор для добавления дополнительного текста.

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

В SassScript permalinkВ SassScript

Родительский селектор также можно использовать в SassScript. Это специальное выражение, которое возвращает текущий родительский селектор в том же формате, что и функции селектора: список, разделенный запятыми (список селектора), который содержит списки, разделенные пробелами (сложные селекторы), которые содержат строки без кавычек (составные селекторы).

SCSS Syntax

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

Если выражение & используется вне каких-либо правил стиля, оно возвращает null. Поскольку null равен falsey, это означает, что вы можете легко использовать его, чтобы определить, вызывается ли миксин в правиле стиля или нет.

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

Продвинутая вложенность permalinkПродвинутая вложенность

Вы можете использовать & как обычное выражение SassScript, что означает, что вы можете передавать его функциям или включать в интерполяцию - даже в других селекторах! Использование его в сочетании с функциями селектора и правилом @at-root позволяет вам очень эффективно вкладывать селекторы.

Например, предположим, что вы хотите написать селектор, который соответствует внешнему селектору и селектору элемента. Вы можете написать миксин, подобный этому, который использует функцию selector.unify() для объединения & с пользовательским селектором.

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") {
    /* ... */
  }
}

⚠️ Внимание!

Когда Sass вкладывает селекторы, он не знает, какая интерполяция использовалась для их создания. Это означает, что он автоматически добавит внешний селектор к внутреннему селектору, даже если вы использовали & в качестве выражения SassScript. Вот почему вам нужно явно использовать правило @at-root, чтобы Sass не включал внешний селектор.