Prevent nesting in SCSS/SASS output [duplicate] - css

Question

This question already has an answer here:
Is there a SASS rule for outputting a descendant to the root?
(1 answer)
Closed 6 years ago.
With all the neat features in SCSS, it can be easy to get carried away and end up with some pretty rough CSS.
Take, for example, a classic nested rats nest -
.image {
...
.imageWrapper {
...
img {
...
}
}
.textWrapper {
...
title {
...
}
caption {
...
}
}
}
Which compiles to
.image {
...
}
.image .imageWrapper {
...
}
.image .imageWrapper img {
...
}
.image .textWrapper {
...
}
.image .textWrapper .title {
...
}
.image .textWrapper .caption {
...
}
This is not only hard to read, but a slog on processors.
Now, I'm not one to use unspecific class-names (just how long is too long?) so nesting has very little functional use to me, but I find it makes my pre-compiled SCSS extremely understandable - the ability to imply the relationship an element has with its parent and children is invaluable to both myself and the next developer who happens across my code.
Is there any way to keep my SCSS nested in all or (preferably) part of my sheet without rendering endless child selectors in my CSS?

Answer 1

I think you're looking for the #at-root directive.
It works by ‘jumping out’ of where you nest it in your Sass to be a the top level.
For example, you could to this :
.image {
color: #333;
#at-root {
.imageWrapper {
color: #666;
img {
color: #999;
}
}
}
.stayNested {
background-color: #555;
}
#at-root {
.textWrapper {
color: #aaa;
title {
color: #ccc;
}
caption {
color: #fff;
}
}
}
}
That would compile to this :
.image {
color: #333;
}
.imageWrapper {
color: #666;
}
.imageWrapper img {
color: #999;
}
.image .stayNested {
background-color: #555;
}
.textWrapper {
color: #aaa;
}
.textWrapper title {
color: #ccc;
}
.textWrapper caption {
color: #fff;
}
For more info, see the official documentation