LESS @import & Web Essentials 2012

Question

In my web project I have split my CSS into separate LESS files for maintenance reasons. I have a file called config.less acting as a master file that imports the other less files, using @import directives.

The problem with this setup seems to be that I get a lot of "Undeclared variable" & "Undeclared mixin" while editing my LESS files, for instance while adding a property variable called @textColor in base.less, that is declared in another less file called variables.less. Is there any way of making web essentials aware of variables and mixins being defined in external less files?

Another thing that seems to be tripping up Web Essentials is when I'm using the nested media query feature of LESS:

.some-selector {
    background: #000;
    @media only screen and (max-width: 800px) {
        background: #fff;
    }
}

The nested @media declaration gets a red underline, and on hover it says "Unexpected '@' block in the style rule". Hovering the nested background property shows a "Validation: 'color' isn't a valid HTML tag.

Answer 1

I cannot give an answer regarding the @media issue with Web Essentials, but I can give advice on the variables and mixins issue.

Basically, change your config.less file to have the variables.less and any other mixin files to be @import-once, then also add @import-once 'variables.less into each file that uses variables from it (do the same for any mixin files used).

What this does is imports the file if you are working on it (like your base.less), but when all the files are compiled by config.less, it will only import the variables.less once, and not again for each file that also references the variables.less.