SASS `@at-root`

This article explains SASS's @at-root.

We'll cover everything from basic usage of @at-root to advanced examples, step by step.

YouTube Video

About SASS @at-root

@at-root is a directive provided by SASS that is used to move nested selectors or properties from the current nesting to the parent scope. By leveraging this feature, you can control nesting depth and generate the intended CSS more efficiently.

Basic usage of @at-root

SASS's nesting makes code more readable, but overly deep nesting can cause unintended CSS to be generated. By using @at-root, you can exclude specific code blocks from the nesting structure.

Basic Syntax

1@at-root {
2  // Code to be output at the parent (root) scope
3}

Example Usage

1.nav {
2  color: blue;
3  @at-root {
4    .nav-item {
5      color: red;
6    }
7  }
8}

Compiled CSS

1.nav {
2  color: blue;
3}
4.nav-item {
5  color: red;
6}

• Because of @at-root, .nav-item is output outside .nav.

@at-root in nested selectors

Even within deep nesting, using @at-root lets you move specific selectors to the root level. This allows you to output controlled CSS even within complex structures.

Example Usage

1.card {
2  background: white;
3  .card-header {
4    color: black;
5    @at-root .card-title {
6      font-size: 20px;
7    }
8  }
9}

Compiled CSS

1.card {
2  background: white;
3}
4.card .card-header {
5  color: black;
6}
7.card-title {
8  font-size: 20px;
9}

• By using @at-root, .card-title is output outside .card-header.

@at-root with arguments

By specifying arguments, @at-root can be controlled more flexibly.

without argument

When you use the without argument, the output ignores the specified scopes. In other words, you can remove parent rules or media queries.

Example Usage

1.nav {
2  @media (min-width: 768px) {
3    &__item {
4      @at-root (without: media) {
5        color: red;
6      }
7    }
8  }
9}

Compiled CSS

1.nav__item {
2  color: red;
3}

• In this case, @at-root (without: media) excludes the media query scope, and .nav__item is output at the root.

with argument

Using with keeps only the specified scopes in the output. Useful when you want to output to the root while preserving specific scopes.

Example Usage

 1.nav {
 2  &__item {
 3    @media (min-width: 768px) {
 4      @at-root (with: media) {
 5        &-large {
 6          font-size: 18px;
 7        }
 8      }
 9    }
10  }
11}

Compiled CSS

1@media (min-width: 768px) {
2  .nav__item-large {
3    font-size: 18px;
4  }
5}

• @at-root (with: media) moves the selector to the root while preserving the media query structure.

Specifying multiple conditions

You can also specify multiple scopes at the same time, separated by spaces.

Example Usage

1.wrapper {
2  @media (min-width: 600px) {
3    @at-root (without: rule media) {
4      .global-style {
5        color: green;
6      }
7    }
8  }
9}

Compiled CSS

1.global-style {
2  color: green;
3}

• In this example, both rule (regular selectors) and media (media queries) are excluded, so .global-style doesn't belong to any scope and is output entirely at the root level. This is useful when you want to intentionally define global styles even within complex nesting.

Combining with media queries

Using @at-root, you can output root-level styles from within media queries. This lets you define responsive design at the component level.

Example Usage

1.container {
2  @media (min-width: 768px) {
3    @at-root {
4      .container-large {
5        width: 80%;
6      }
7    }
8  }
9}

Compiled CSS

1.container-large {
2  width: 80%;
3}

• Using @at-root, you can output root-level styles from within media queries as well. This makes it easy to define independent global styles for each breakpoint.

Use cases for @at-root

@at-root is handy when you want to output styles at the root level under specific conditions. It's especially helpful when handling media queries or theme-specific styles within components.

Separating components and themes

By using @at-root, you can generate independent global classes even from within media queries. This makes it easier to organize themes and states per component.

Example Usage

 1.card {
 2  background: white;
 3  color: black;
 4
 5  @media (prefers-color-scheme: dark) {
 6    @at-root (with: media) {
 7      .card-dark {
 8        background: #222;
 9        color: white;
10      }
11    }
12  }
13}

Compiled CSS

 1.card {
 2  background: white;
 3  color: black;
 4}
 5
 6@media (prefers-color-scheme: dark) {
 7  .card-dark {
 8    background: #222;
 9    color: white;
10  }
11}

• In this example, while defining styles for the dark theme inside .card, @at-root generates a separate .card-dark class. This allows you to switch classes flexibly across different themes.

Notes

When using @at-root, keep the following points in mind.

1. Avoid excessive use @at-root is powerful, but overusing it can obscure the intent of your nesting.

2. Clarify intent Leaving comments about why you're using @at-root makes it easier for other developers to understand.

3. Be mindful of scope consistency Moving output to the root can change style dependencies. Be clear about which elements it applies to.

4. Combine with other SASS features Combining @at-root with @mixin and @function enables more flexible CSS design.

Summary

{^ i18n_speak @at-rootは、SASSのネスト構文を補完する強力なツールです。不要なネストを解消し、構造を整理することで、より明確で再利用性の高いCSSを生成できます。スコープの理解を深め、目的に応じて使い分けることで、プロジェクト全体の可読性と保守性を高めることができます。^}

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video