How to turn on Visual Studio 2010 .css Intellisense on .less file

Try using the CSS Is Less extension for VS2010:

http://visualstudiogallery.msdn.microsoft.com/dd5635b0-3c70-484f-abcb-cbdcabaa9923

Forces .LESS files to open in the CSS editor, without having to change settings or adding HTML tags to your LESS file.


Visual Studio allows you to map custom extensions to the different editors by going to Tools->Options->Text Editor->File Extension. You simply supply the custom extension and select the editor you wish to associate it with. Sadly, the Visual Studio team has seemed to overlook the CSS editor in the list of editors.

A possible work around is to associate the extension with the Html Editor and then type <html><head><style> in the top of the file and </style></head></html> in the bottom of the file. This will give you CSS intellisense support between the sets of tags. You can then remove the HTML tags and the file association when your done editing.


Another alternative is to name your files '.less.css', then change any references to them in either your master page or your main css file (the one that loads all the other css files with @import statements), then configure the less handler as follows in the 'handlers' section of your Web.Config file:

<add name="LessCssHandler" type="dotless.Core.LessCssHttpHandler,dotless.Core" path="*.LESS.CSS" verb="*" />

You then get syntax highlighting, less works fine and you've not had to set up new file extensions in vs, load any vs addins, etc, which is handy if you have a team of more than 1 developer.

If you use a single file to define colours etc, it will have to be named '.less' and imported into each .less.css file with an @import 'exampledefs.less'; statement within that file.