Less.js: @import inside a selector (feature request)

Created on 23 Feb 2012 · 12Comments · Source: less/less.js

Allowing imports inside of selectors would open up an awesome collection of possibilities for code reuse and style scoping. Something like:

.foo{
    @import "bar";
}

Would prove especially useful for creating less modules for CSS backed widgets. For example, if I author e.g., AutoRotator and a StackContainer and had the ability to nest imports inside selectors, then I could do:

# AutoRotator/pane.less
.pane{
    border: 1px solid gray;
    width: 300px;
    /* etc. ... */
}

# StackContainer/pane.less
.pane{
    border: 1px solid orange;
    width: 200px;
    /* etc. ... */
}

And the user of either library would be able to decide the scope of the various styles like:

# main.less
.myRotator {
    @import "AutoRotator/pane";
}

# main.less
.myStack {
    @import "StackContainer/pane";
}

Notice how simple the selectors seem inside the files. I think this basically just simulates http://www.w3.org/TR/css3-namespace/

Source

jnewman

👍8 ❤2

Most helpful comment

I've found a dirty hack to allow namespaced imports. Just comment the following lines:

https://github.com/cloudhead/less.js/blob/master/lib/less/tree/ruleset.js#L20

and

https://github.com/cloudhead/less.js/blob/master/lib/less/tree/ruleset.js#L27

to look like

// Evaluate imports
//if (ruleset.root || ruleset.allowImports) {
    for (var i = 0; i < ruleset.rules.length; i++) {
        if (ruleset.rules[i] instanceof tree.Import) {
            Array.prototype.splice
                 .apply(ruleset.rules, [i, 1].concat(ruleset.rules[i].eval(env)));
        }
    }
//}

But I have no clue what this also affects on compiling. I've done a small test with bootstrap from Twitter:

#test {
  @import "../../bootstrap/less/bootstrap";
}

Compiles down to:

#test article,
#test aside,
#test details,
#test figcaption,
#test figure,
#test footer,
#test header,
#test hgroup,
#test nav,
#test section {
  display: block;
}
...

And It has worked in my case. Can anyone confirm this on a larger project?

@cloudhead Why is importing only executed on the root level? And why is ruleset.allowImports always undefined and how can I overwrite it to be always true? :)

Thanks

marcboeker on 25 Feb 2012

👍4

All 12 comments

+1. Would definitely be helpful.

souldreamer on 23 Feb 2012

marcboeker on 24 Feb 2012

Please add this!

bkrembs on 24 Feb 2012

I've found a dirty hack to allow namespaced imports. Just comment the following lines:

https://github.com/cloudhead/less.js/blob/master/lib/less/tree/ruleset.js#L20

and

https://github.com/cloudhead/less.js/blob/master/lib/less/tree/ruleset.js#L27

to look like

// Evaluate imports
//if (ruleset.root || ruleset.allowImports) {
    for (var i = 0; i < ruleset.rules.length; i++) {
        if (ruleset.rules[i] instanceof tree.Import) {
            Array.prototype.splice
                 .apply(ruleset.rules, [i, 1].concat(ruleset.rules[i].eval(env)));
        }
    }
//}

But I have no clue what this also affects on compiling. I've done a small test with bootstrap from Twitter:

#test {
  @import "../../bootstrap/less/bootstrap";
}

Compiles down to:

#test article,
#test aside,
#test details,
#test figcaption,
#test figure,
#test footer,
#test header,
#test hgroup,
#test nav,
#test section {
  display: block;
}
...

And It has worked in my case. Can anyone confirm this on a larger project?

@cloudhead Why is importing only executed on the root level? And why is ruleset.allowImports always undefined and how can I overwrite it to be always true? :)

Thanks

marcboeker on 25 Feb 2012

👍4

Here's the patched fork:
https://github.com/marcboeker/less.js/commit/5a2bdbcdaa03b7ded032f7a484f7f9843416fe8d

Just checkout and do a npm install less.js

-Marc

marcboeker on 25 Feb 2012

gonna fix this