less - Using only part of a less stylesheet

Question

Let's say I have a less stylesheet with a lot of styles in it, and I want to copy a few other to a new sheet, like so:

huge-stylesheet.less:

/*

blah blah blah for dozens of styles

*/
.loopy {
    color: greenyellow
}

tiny-stylesheet.less:

.froopy {
    .loopy
}

Is it possible for me to set it up so that when compiled, tiny-stylesheet.css just has the .froopy style defined and not everything else that's in huge-stylesheet.less?

Answer 1

Updated Answer for LESS 1.5

You can now import a file as a reference in LESS 1.5. So

@import (reference) "huge-stylesheet";

Which gives you access to use any and all the LESS in huge-stylesheet.less without outputting any of it into tiny-stylesheet.less.

You should then just be able to do as you originally intended:

.froopy {
    .loopy;
}

Original Answer

Yes, it is possible "that when compiled, tiny-stylesheet.css just has the .froopy style defined and not everything else" by using namespaces. You may need to set up the namespace in separate file (say master.less) like this:

#yourNameSpace() {
    your huge code that was in huge-stylesheet 
}

And then use another file to produce huge-stylesheet.less like this:

@import "master"; 
#yourNameSpace; //call the code to produce the huge sheet

And use it in tiny like this:

@import "master";
.froopy {
    #yourNameSpace > .loopy;
}

Or you might try leaving the code as is in the huge sheet and do this in the tiny-stylesheet.less (I have not played with importing to know if it can be nested in a block):

#yourNameSpace() {
    @import "huge-stylesheet"; 
}

.froopy {
    #yourNameSpace > .loopy;
}

Either way, it will only extract the code .loopy from the namespace. No other final CSS code is generated from the namespace code by the tiny LESS file.