Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass at-rules

Sass @at-root

Posted in Sass Tutorial
Updated on Sep 29, 2024
By Mari Selvan
👁️ 17 - Views
⏳ 4 mins
💬 1 Comment
Sass @at-root

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
Copy To Clipboard
@at-root {
  /* Styles */
}

⚖️ With Selector or Rule

Syntax
Copied
Copy To Clipboard
@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
Copy To Clipboard
.container {
  .item {
    color: red;

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

The following is the output:

example.scss
Copied
Copy To Clipboard
.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
Copy To Clipboard
.container {
  .item {
    color: blue;

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

The following is the output:

example.scss
Copied
Copy To Clipboard
.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
Copy To Clipboard
.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
Copy To Clipboard
.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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy