Question

I am trying to do some work with .LESS, and am running into a conflict with a fellow programmer, and attempting to discern the best use here.

Essentially, the debate is over the proper use of @import to bring .less files together that cannot compile on their own. For instance, assume the following..

variables.less

// some variables are defined here

reset.less

// variables are used here

compile.less

@import("variables.less")
@import("reset.less")

Now then, if you tried to compile reset.less, it would fail. Because it requires things from variables.less. To one of us, this is perfectly fine because it allows us to modularize our project into pieces. But the other disagrees, because they claim each file should stand alone.

What do some of you more experienced .less coders think on this matter? What is “Accepted” practice?

Answer 1

Obviously, what is “best practice” for one company may not be so for another. However, it is a very common practice to have them split as you note. Bootstrap does this.

If it is necessary to be able to compile each individually, but also a desire to modularize, then what you could do is keep it as you note above, but also define within each submodule (like reset.less) an

@import-once "variables.less" 

at the beginning. That way, if one is just compiling reset.less it works, but in compile.less it will only do the initial import of the variables.less file and not any subsequent calls from the submodules.