SASS: How do I prepend every rule in a stylsheet with a selector to 'namespace'

namespaces, sass

Solution

The answer is obvious:

.sandbox {
    @import "foo";
}

Problem

I want to include new SASS in an old codebase. How do I avoid the new styles from leaking - given the new styles already written. e.g. ``` .box width: 100% // ... .tab display: inline-block &:active font-weight: bold // Many more rules ``` to ``` .sandbox .box width: 100% // ... .tab display: inline-block &:active font-weight: bold // .many .more .rules ``` This would be over many rules. So the new html snippets in the old codebase would have ``` <div class="sandbox"> <div class="box"> <!-- Content here --> </div> ``` Or - is there an easier way of avoiding css code leakage?

Original source