@at-root

@at-root ルールは通常 @at-root <selector> { ... } と記述され、その中のすべてが通常のネストを使用する代わりにドキュメントのルートに出力されるようにします。これは、SassScriptの親セレクタとセレクタ関数を使用して高度なネストを行う場合に最もよく使用されます。

たとえば、外部セレクタ *と* 要素セレクタに一致するセレクタを記述したいとします。selector.unify() 関数を使用して & をユーザーのセレクタと組み合わせる、次のようなmixinを記述できます。

プレイグラウンド

SCSS 構文

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

Sassは、セレクタのネストを実行しているときに、補間を使用してセレクタが生成された方法を認識しないため、@at-root ルールが必要です。これは、SassScript式として & を使用した場合 *でも*、外部セレクタが内部セレクタに自動的に追加されることを意味します。@at-root は、外部セレクタを含めないようにSassに明示的に指示します。

💡 豆知識

@at-root ルールは、ドキュメントのルートに複数のスタイルルールを配置するために @at-root { ... } と記述することもできます。実際、@at-root <selector> { ... } は @at-root { <selector> { ... } } の単なる省略形です！

スタイルルールを超えてスタイルルールを超えて パーマリンク

単独では、@at-root はスタイルルールのみを削除します。@media や @supports のようなアットルールは残ります。ただし、これが意図しない場合は、@at-root (with: <rules...>) { ... } または @at-root (without: <rules...>) { ... } と記述されたメディアクエリ機能のような構文を使用して、何を包含または除外するかを正確に制御できます。(without: ...) クエリは、除外するルールをSassに指示します。(with: ...) クエリは、リストされているルール *以外* のすべてのルールを除外します。

プレイグラウンド

SCSS 構文

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

アットルールの名前の他に、クエリで使用できる2つの特別な値があります。

  • rule はスタイルルールを指します。たとえば、@at-root (with: rule) はすべてのアットルールを除外しますが、スタイルルールは保持します。

  • all は、すべてのアットルール *と* スタイルルールを除外する必要があることを指します。