| 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 ...
Get Pragmatic Guide to Sass 3 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
