CODEWITHSUNDEEP
cssless
ShravanP
ShravanP

Reputation: 293

@Import of less files into a limited scope

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!

Upvotes: 24

Views: 12340

Answers (4)

Eugene Mihaylin
Eugene Mihaylin

Reputation: 1776

Times changed. Now your first code snippet will work.

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

since https://github.com/less/less.js/issues/656#issuecomment-4219139

Upvotes: 3

Shankar Cabus
Shankar Cabus

Reputation: 9792

The syntax of LESS (and CSS) don't allow @imports into CSS rules. Try use namespace:

styles.less

.styles {
    [your code]
}

Then, replace the @import for namespace:

.wrapper-class {
    .styles;
}

Reference:

http://lesscss.org/features/

Upvotes: -5

Albin
Albin

Reputation: 2558

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";
}

Upvotes: 51

Christoph
Christoph

Reputation: 51191

According to the css-spec, the @import-declaration has to come before all other declarations in the css-file. So your @import inside the rule is expected to fail. I guess the @importing at the end of the file not failing is goodwill of the browser-vendors.

I guess LESS will abide by the same rules.

EDIT: the question is, why do you want to have those styles scoped? With proper declarations, this should not be necessary.

Upvotes: 2

Related Questions