@Import of less files into a limited scope

Question

I want to import all styles from another less file, but into a limited scope. I'm trying this:

"my-site.less"

.wrapper-class {     @import "path/to/styles.less"; } 

But this doesn't work at all. I'm using the browser-based less.js option, and I can see the GET statement that is run when it actually does the import. But the resultant CSS does not contain any of the styles from the other sheet. If I do it like this, it works:

.wrapper-class  {     /* ... */ } @import "path/to/styles.less"; 

But this defeats the original purpose. So is there any way to do a limited-scope @import like this in Less? Thanks!

Answer 1

Since this question was posted and answered, pre-processors have implemented @import with scope. This now works in LESS, SASS and Stylus.

example:

.lt-ie9 {   @import "ie8-fixes"; }