Is it possible to get the LESS parser to create a

Question

Sorry for the horrible question wording, let me explain.

For a project I'm working on, I'd like to manage various dependencies for my LESS files on the server. Because of the way the project is structured (different components symlinked in different ways), it's much more limiting to just use @import to build dependencies etc.

Ideally I'd like to just spit out a list of required LESS files in the section, e.g.:

<link rel='stylesheet/less' href='/path/to/some/file.less' type='text/css' media='all' />
<link rel='stylesheet/less' href='/path/to/some/other-file.less' type='text/css' media='all' />

Then, for example, if a variable or mixin is defined in file.less, I'd like to be able to use it in other-file.less.

From what I can tell, that doesn't work. Each LESS file seems to exist in its own scope and variables etc in one are not available in the other.

Is this correct? Is the scope entirely limited to a single file and any @imports therein? I'm reasonably sure that it is, but not entirely.

For now, my workaround is more complex than I'd like: I'm building dependencies server side, and then munging them into a giant, single development.less file on the fly. (Note that for production purposes, I have a build process that compiles and minifies my less so that I serve straight up CSS).

I've looked at browser.js in the LESS source code for clues but thought I'd ask here first if this was possible or even desirable. I was a bit surprised at this behavior since it's not how multiple javascript files and inline code work.

Answer 1

Why It Doesn't Work

Each <link> of a LESS file preprocesses that file and resolves it to just a plain CSS output. No variables or anything are left in the "scope" of the html itself, so there is nothing for the second <link> to be able to use. That is why one cannot read the other.

A Possible Help

With LESS 1.5 an @import can be made to just be a reference (and thus not compile direct output into the file). So your other-file.less could do this:

@import (reference) file.less;

To gain the dependencies needed for it.