Pragmatic Guide to Sass 3

34	Escaping Indentation with @root

Sometimes, for code clarity, we want to keep our styles close together. And this might mean that we’re in the middle of a nested block of Sass when we really want to be outside of it. This is where @at-root comes in handy.

In our example, we have a header icon we want to style. It’s mainly found in the header, so we want to associate the icon with those styles. However, we might want to use the icon elsewhere, so we’d really like the styles to be more global. We use @at-root to flatten the nesting and make .icon at the root of the document.

There aren’t a lot of use cases for @at-root—moderating our nesting is an equally appropriate solution. However, there are a couple of situations that people have found ...