A High-Value, Undocumented LESS Editor Feature in Visual Studio

A High-Value, Undocumented LESS Editor Feature in Visual Studio

Rate This
  • Comments 2

Recently a very valuable, undocumented feature in the Visual Studio LESS editor came to my attention. This applies equally to Visual Studio 2012 Update 2 and later, and to Visual Studio 2013. The installation of Web Essentials is not required to benefit from this feature.

The Visual Studio LESS Editor respects @import statements, and can resolve namespace, mixin and variable definitions from imported files. However, a common pattern with larger LESS projects is to have one include file establishing the include order, and a large number of source files with no @imports at all. The BootStrap project, for example, contains bootstrap.less, which looks like:

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset
@import "normalize.less";
@import "print.less";

When any of the project files, such as mixins.less, is opened it will display a long list of validation errors. IntelliSense will not work for the items which come from imports unless one adds an @import statement. Unfortunately, this ruins your ability to build or easily update your project.

A solution to this problem is to use a special “reference” comment, which is exactly like those used for injecting JavaScript references in *.js files. At the top of each BootStrap LESS file, add:

/// <reference path="bootstrap.less" />

Once this is done, the editor references the specified LESS file(s) when preparing validation and IntelliSense without changing the semantics of the source code.

Note: the LESS compiler used by Web Essentials does not respect this statement; you will not be able to build such projects inside the IDE with Web Essentials. You will still need to use a command line build. However, you will find that your editing experience will be greatly enhanced.

Leave a Comment
  • Please add 4 and 5 and type the answer here:
  • Post
  • Tried Web Essentials and there are no problems for building the project at all. It works as expected - ignores the /// <reference /> and builds just fine. Or is it something else that won't work?

  • Web Essentials will not be able to compile those individual LESS files.

    This is by design; those LESS files are not supposed to be compiled standalone.

    Instead, they're compiled into bootstrap.less, which WE compiles just fine.

Page 1 of 1 (2 items)