Tutorials

Sass at-rules

Sass Introduction

Sass @at-root

Posted in Sass Tutorial

Updated on Sep 29, 2024

By Mari Selvan

👁️ 30 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @at-root directive in Sass is a powerful feature that allows you to control where your styles are output in the final CSS.

It can be especially useful when working with deeply nested rules or when you need to break out of the current context.

Understanding how to use @at-root effectively can help you write more maintainable and modular CSS.

💡 Syntax

The @at-root directive can be used in two main ways: either on its own or with a specific rule or selector. Here's the basic syntax:

Syntax

Copied

@at-root {
  /* Styles */
}

⚖️ With Selector or Rule

Syntax

Copied

@at-root .selector {
  /* Styles */
}

🔢 Parameters

The @at-root directive itself does not take any parameters, but it can be used in conjunction with other Sass features, such as interpolation, to control the output location.

Without Parameters: Outputs the styles at the root level of the generated CSS.
With Parameters: Allows you to target specific selectors or rules, outputting them at the root level.

🚩 Optional Flags

with: Use this to include specific properties or rules within the @at-root context.
without: Use this to exclude specific properties or rules from being moved to the root.

📝 Example Usage

Let's explore some examples to understand how the @at-root directive works in different scenarios.

📜 Example 1: Breaking Out of Nesting

example.scss

Copied

.container {
  .item {
    color: red;

    @at-root {
      .highlight {
        color: yellow;
      }
    }
  }
}

The following is the output:

example.scss

Copied

.container .item {
  color: red;
}

.highlight {
  color: yellow;
}

In this example, the .highlight class is output at the root level, outside of the .container .item nesting.

📜 Example 2: Using @at-root with Selectors

example.scss

Copied

.container {
  .item {
    color: blue;

    @at-root .global-item {
      font-weight: bold;
    }
  }
}

The following is the output:

example.scss

Copied

.container .item {
  color: blue;
}

.global-item {
  font-weight: bold;
}

Here, the .global-item class is placed at the root level, separate from the .container .item styles.

📜 Example 3: Controlling Output with with: and without: Flags

example.scss

Copied

.container {
  .item {
    @at-root (without: media) {
      color: green;
    }

    @media screen and (min-width: 600px) {
      @at-root (with: media) {
        color: blue;
      }
    }
  }
}

The following is the output:

example.scss

Copied

.container .item {
  color: green;
}

@media screen and (min-width: 600px) {
  .container .item {
    color: blue;
  }
}

In this example, the @at-root directive is used with the without and with flags to control where the styles are output, even within a media query.

🎉 Conclusion

The @at-root directive in Sass provides you with fine-grained control over where your styles are placed in the final CSS output. By using @at-root, you can break out of nested contexts when necessary, making your styles more flexible and avoiding overly specific selectors that can be difficult to maintain.

Understanding and utilizing the @at-root directive effectively can help you write cleaner, more modular, and more maintainable Sass code. Whether you're working on a large project with deeply nested rules or just need to output certain styles at the root level, @at-root is a valuable tool in your Sass toolkit.

Experiment with the different ways to use @at-root to better control your CSS output and enhance your overall workflow.