SASS: How to add each rule to a stylized table with a selector in the "namespace",

Question

I want to include the new SASS in the old code base. Avoiding new styles from leaking - given the new styles already written.

eg.

.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 

It will be by many rules.

So, the new html fragments in the old code base will have

 <div class="sandbox"> <div class="box"> <!-- Content here --> </div> 

Or - is there an easier way to avoid CSS code leakage?

Answer 1

The answer is obvious:

 .sandbox { @import "foo"; }