LESS: Unrecognised input

Question

I'm trying to learn less with the help of Web Essentials 2012.

Right from the start, this LESS code:

@main-color: red;

.mega-warning {
    font-size: 24px;
    color: @main-color;
}

is giving a compile error "LESS: Unrecognised input" and the compilation stops. When i declare the variable @main-color inside the .mega-warning class scope everything works:

.mega-warning {
    @main-color: red;
    font-size: 24px;
    color: @main-color;
}

What am i missing?

Answer 1

I'm struggling with the very same issue. Looks like Web Essentials 2012 v2.9 for some reason is not very happy about *.less files starting with variable declaration. Here is my workaround:

html{}

@main-color: red;

.mega-warning {
    font-size: 24px;
    color: @main-color;
}

Strangely enough things work absolutely fine when using standalone lessc 1.4.2 compiler (which is included in WE2012 2.9 as per changelog). I've sent an email to the author of Web Essentials extensions and posted him a link to this question, so hopefully he'll address it pretty soon.

Answer 2

Save less files with encoding "UTF-8 without BOM". This approach was proposed in the post VS 2012 Web Essentials Less Compile Error