Sass @at-root Rule

What You’ll Learn

Sass @at-root moves nested styles to the document root instead of under the current selector. This page covers basic escape, selector.unify with &, (with:) / (without:) queries for @media and @supports, and five compiled examples.

What Is @at-root?

Official docs: the @at-root rule is usually written @at-root { … } and causes everything within it to be emitted at the root of the document instead of using normal nesting. It is most often used for advanced nesting with the SassScript parent selector and selector functions.

• By default it escapes style rules only.
• @media, @supports, and similar at-rules stay unless you query them out.
• @at-root .foo { … } is shorthand for putting one rule at the root.
• & still contains the outer selector as an expression even inside @at-root.

📝 Syntax

.parent {
  color: #333;

  @at-root {
    .sibling { color: #666; }
  }

  // With a selector:
  @at-root .modal { z-index: 10; }

  // Control wrappers:
  @at-root (without: media) { … }
  @at-root (with: rule) { … }
}

Official fun fact: @at-root <selector> { … } is shorthand for @at-root { <selector> { … } }.

🧩 Why @at-root With &?

Official docs: Sass does not know what interpolation was used to generate a selector when it performs selector nesting. It will automatically add the outer selector to the inner selector even if you used & as a SassScript expression. @at-root explicitly tells Sass not to include the outer selector again (although that outer selector is still available inside &).

@use "sass:selector";

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

⚙️ Beyond Style Rules: with / without

Official docs: control exactly what is included or excluded with syntax like media-query features:

• @at-root (without: <rules…>) { … } — exclude listed rules.
• @at-root (with: <rules…>) { … } — exclude everything except listed rules.
• You can list at-rule names such as media or supports.

Special values

• rule — means style rules. Example: (with: rule) keeps nesting under the current selector but drops at-rules.
• all — means every at-rule and style rule should be excluded (full bubble to the document root).

Examples Gallery

Each example shows how nesting changes in the compiled CSS. Open View Compiled CSS for verified output.

@use "sass:selector";

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

.wrapper .field {
  @include unify-parent("input") {
    border: 1px solid #ccc;
  }
  @include unify-parent("select") {
    background: #f5f5f5;
  }
}

.wrapper input.field {
  border: 1px solid #ccc;
}

.wrapper select.field {
  background: #f5f5f5;
}

.parent {
  color: #333;

  @at-root {
    .sibling {
      color: #666;
    }

    .orphan {
      color: #999;
    }
  }

  .nested {
    font-weight: bold;
  }
}

.parent {
  color: #333;
}
.sibling {
  color: #666;
}

.orphan {
  color: #999;
}

.parent .nested {
  font-weight: bold;
}

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

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

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

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

@supports (display: grid) {
  .layout {
    display: grid;

    @at-root (without: supports) {
      .no-grid-fallback {
        display: block;
      }
    }

    @at-root (with: rule) {
      gap: 1rem;
    }
  }
}

@supports (display: grid) {
  .layout {
    display: grid;
  }
}
.layout .no-grid-fallback {
  display: block;
}
.layout {
  gap: 1rem;
}

@media screen {
  .card {
    padding: 1rem;

    @at-root (without: all) {
      .toast {
        position: fixed;
        bottom: 1rem;
      }
    }

    @at-root .modal {
      z-index: 10;
    }
  }
}

@media screen {
  .card {
    padding: 1rem;
  }
}
.toast {
  position: fixed;
  bottom: 1rem;
}

@media screen {
  .modal {
    z-index: 10;
  }
}

🚀 Real-World Use Cases

• Selector libraries — mixins that unify & with element/type selectors.
• BEM helpers — emit modifiers or elements at a controlled root.
• Print / screen splits — share a nested block but print some rules outside @media.
• Feature-query fallbacks — keep structure while dropping @supports.
• Global UI chrome — toasts/modals that should not inherit a card selector.

⚠️ Common Pitfalls

• Forgetting @at-root with interpolated & — Sass may nest again and break the selector.
• Expecting media to vanish — plain @at-root keeps @media.
• Overusing (without: all) — easy to lose intentional nesting and cascade context.
• Confusing & availability — outer selectors remain in & even inside @at-root.
• Using it for everything — most nesting does not need @at-root; reserve it for advanced cases.

💡 Best Practices