cloudhead/less.js — Issue #656: @import inside a selector (feature request)
Author: jnewman
Created: 2012-02-23 00:31:47+00:00
State: open

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/