CODEWITHSUNDEEP
csssass
KuN
KuN

Reputation: 1211

Adding a global parent selector in scss

I am using Foundation 6 which has a nice scss structure. But how can I add a global parent selector for its output css?

I need to do this for one odd site to avoid css overwritten (i will do a css reset first). Currently I have to manually do a nesting on the output css and render it again to make it work, 

.this-site-only {
    %final css output%
}

I guess I can achieve the same result using Gulp or WebPack but i am also curious to know if there is any SCSS/SASS way to to this?

Upvotes: 0

Views: 506

Answers (1)

p1n5u
p1n5u

Reputation: 57

If I understood your question correctly. You can simply wrap your imports into your desired selector in your main SCSS file (in my case app.scss). Then you would have something like that:

.this-site-only{ 
    @import 'foundation';
    @import 'your-stuff';

    .your-style{
        color: #000;
        font-size: 20px;
    }
}

Upvotes: 1

Related Questions