@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
@use "sass:selector"

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



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

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

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

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

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

За пределами правил стилей

Само по себе, @at-root только удаляет правила стилей. Любые правила @, такие как @media или @supports будут оставлены. Однако, если это не то, что вы хотите, вы можете точно контролировать, что включать или исключать, используя синтаксис, похожий на свойства запросов медиа, записанный @at-root (with: <rules...>) { ... } или @at-root (without: <rules...>) { ... }. Запрос (without: ...) указывает Sass, какие правила нужно исключить; запрос (with: ...) исключает все правила, *кроме* тех, которые указаны.

@media print {
  .page {
    width: 8in;

    @at-root (without: media) {
      color: #111;
    }

    @at-root (with: rule) {
      font-size: 1.2em;
    }
  }
}

// SASS
@media print
  .page
    width: 8in

    @at-root (without: media)
      color: #111


    @at-root (with: rule)
      font-size: 1.2em

/* CSS */
@media print {
  .page {
    width: 8in;
  }
}
.page {
  color: #111;
}
.page {
  font-size: 1.2em;
}

В дополнение к именам правил @, можно использовать два специальных значения в запросах:

• rule относится к правилам стилей. Например, @at-root (with: rule) исключает все правила @, но сохраняет правила стилей.

• all относится ко всем правилам @ *и* правилам стилей, которые должны быть исключены.