Compile error with escaped string in dotless with VS Web Essentials 2012

Question

We've got some code that I believe came from the .less version of Bootstrap that won't compile on save/build in VS2012 using Web Essentials:

.spanX (@index) when (@index > 0) {
    ~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}" { .span(@index); }
    .spanX(@index - 1);
}

It works fine if we compile it using the LessBundle in System.Web.Optimization, but we are trying to get the Less compiled to CSS in advance. Does anyone know how to make this work with Web Essentials?

Answer 1

IIRC, Web Essentials uses less.js for its compilation step. Less.js doesn't seem to recognize your example as valid LESS. If you remove the ~"" from around the selector, less.js recognizes the input, so try doing that:

.spanX (@index) when (@index > 0) {
    input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { 
        .span(@index); 
    }
    .spanX(@index - 1);
}