Question

SHORT: Is there a possibility to import less files “on demand”, only when the function/variable has not been defined yet?

LONG: Let’s assume I have LESS file containing my styles for the page. Let’s call it styles.less. In addition, I have 5 more LESS files. Everyone of there contains generic design primitives, for example design of the info box which I use in many projects – that’s the reason it’s not been merged to styles.less. Let’s assume it’s called .infobox {}.
Then, is it somehow possible to “try” to import that 5 files when .infobox is not found in styles.less? I’m interested in both compiling via lessc (module for node) and “on-the-fly” compilation in web browser.

I hope my examples clarify the situation enough – if not, feel free to comment and I’ll edit the question to provide more information.

Answer 1

I have not been able to find a way to make this fully automated. I also do not know if you are desiring this functionality in order to reduce @import requests or to simply reduce the final CSS to not load items it does not need.

If you do not need it to be fully automated, and you are seeking just to reduce the CSS generated, and you do not have too many classes you desire to do this with, then you can do something like the following in your styles.less file.

//have at the top of the file some variables set to 0 or 1 if the class
//is present or absent in that file
@usesClass-infobox: 0;

//set up a mixin to load it if NOT in the file
.setClass-infobox(@set) when (@set = 0) {
  @import 'infobox.less'; 
}

//a default mixin to do nothing otherwise
.setClass-infobox(@set) {}

//call the mixin
.setClass-infobox(@usesClass-infobox);

Of course, this does not really help automate the process. After all, if you know .infobox is not in the styles.less file, then you would just add the @import anyway without any extra mixins to check. The only real value this gives is that it sets up a section of variables that basically informs the coder that “Hey, there are modules that can be loaded for this functionality if you are not including it here; so tell me, are you including it?”

Again, I’m not sure if this totally resolves what you are going for. I offered it as it could be useful for some people in some situations.