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

Question

Does anyone know how to enable css intellisense in a non .css file extension? I have a .less file that is basically a .css file but visual studio will not use .css intellisense on the file.

I've had a go at few things in the registry, but it doesn't look possible. Sorry, might be worth coding something to rename them to CSS and back to less afterwards. — DaveShaw, Feb 11 '11 at 20:55

score 43 · Accepted Answer · answered Feb 11 '11 at 21:57

43

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.

answered Feb 11 '11 at 21:57

Luke

1,243
10
10

3

This extension also provides compile-on-save: http://visualstudiogallery.msdn.microsoft.com/e646c6ec-87a7-45ea-81e8-d655a3d3e73e – zcrar70 Aug 23 '11 at 17:35
I have installed the extension but still no luck, it's again plain text. Should I do something else rather than just installing?? – Learner Sep 05 '14 at 23:59

score 20 · Answer 2 · answered Feb 11 '11 at 20:48

20

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.

answered Feb 11 '11 at 20:48

Nick H

433
1
3
10

5

Adding the tags worked perfectly, and you can comment them out (comments get removed by the css compiler when minifying) so you have a valid stylesheet all the time without adding and removing the tags. – aBetterGamer Feb 11 '11 at 21:00
4

In Visual Studio 2012 this is now the best answer on this question because the CSS editor is included in the list of editors and you can easily associate .less with the css source editor. – CatDadCode Oct 02 '12 at 15:23
VS2012 added CSS to the list, wooo hooo :) – Ayyash Nov 11 '12 at 16:43

DavidWainwright · Answer 3 · 2011-05-10T16:36:37.370

16

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.

edited May 10 '11 at 16:36

answered May 10 '11 at 14:50

DavidWainwright

2,895
1
27
30

easiest solution out there. thanx – stoic Jun 01 '11 at 13:25
this solution kinda falls down with `@import` – fearofawhackplanet Oct 14 '11 at 13:30
@fearofawhackplanet How so? I'm using it with import fine – DavidWainwright Oct 20 '11 at 08:45
@coalvilledave It doesn't work for me. If my import is a pure css file then it's fine, but if I try `@import "_whatver.less.css"` then my css all breaks. I'm guessing the `less` compiler treats it as a pure css file because of the extension. If I change the `_whatever` file extension to `.less` and `@import "_whatever"` then it works again, but then I've lost my formatting/intellisense for the `_whatever` file. I.e. as far as I can tell, this solution only works for the top lever/master `less` file, if that makes sense. – fearofawhackplanet Oct 20 '11 at 09:02
@fearofawhackplanet Weird - I use a site.css file with all my import statements in. Within this file I have: `@import "layout.less.css";` and it works a treat. – DavidWainwright Oct 20 '11 at 12:39
@coalvilledave if you are importing from a plain css file then the `less` compiler is not performing the import, maybe that is the difference? Can you import a `.less.css` file from within another `.less.css` file? For example put all your variable declarations in a separate file. I have double checked and it definitely doesn't work on my machine. – fearofawhackplanet Oct 20 '11 at 13:02
@fearofawhackplanet I'm not importing a .less.css from another .less.css file, but I have a definitions.less file with all my colour defs in etc, and I'm importing that into a .less.css file with `@import "definitions.less";` with no problems. I don't need syntac highlighting on the defs file. – DavidWainwright Oct 21 '11 at 14:57
unfortunately, lesscss latest version changed all of that, it does not process a file unless it has an explicit .less extension :( – Ayyash Nov 11 '12 at 16:38
Hi Ayyash - have you tried changing the path attribute val to *_LESS.CSS and renaming your file appropriately? - just a thought. Thanks for the update however, I'll remember that for when I upgrade less. – DavidWainwright Nov 12 '12 at 10:48

score 10 · Answer 4 · answered Mar 16 '12 at 18:49

10

I'm really enjoying MindscapeWebWorkbench. It is a free plugin for VS 2010 to provide .less support. In addition the extension came with .Sass and Coffee script support!

Give a try!

Ahh, Hanselman approves ;)

answered Mar 16 '12 at 18:49

Custodio

8,594
15
80
115

This one was really good. Sadly, it only works with the grown-up versions of VS, as MS apparently disables extensions in Express products. Intellisense and other stuff is a great way to learn programming so i'm surprised why they do that but i guess it's about the money. – Konrad Viltersten Jul 24 '12 at 10:44

score 2 · Answer 5 · answered Apr 16 '13 at 21:34

2

Late answer, but this is a hackish way to solve it in "pure" VS2010

#if DEBUG
<html><head><style>
#endif

in the top of the file and

#if DEBUG
</style></head></html>
#endif

in the bottom of the file

answered Apr 16 '13 at 21:34

Erik Karlsson

570
1
6
17

score 0 · Answer 6 · answered May 23 '12 at 09:29

0

This extension provides full Intellisense

http://visualstudiogallery.msdn.microsoft.com/e646c6ec-87a7-45ea-81e8-d655a3d3e73e

answered May 23 '12 at 09:29

Tom Dudfield

3,077
2
25
39

score 0 · Answer 7 · answered Sep 21 '12 at 13:02

I highly recommend using Crunch: http://crunchapp.net/

Visual Studio (Express included) allows you to open Less files with Crunch. True it doesn't open them in Visual Studio, it opens Crunch to edit the file, but there are many reasons to use Crunch anyways. The biggest reason is that Crunch will take your Less code and compile to a pure CSS file. The benefits are that you don't need to include the less.js script in your website, which avoids extra overhead, you can write Less code, and it's as simple as double-clicking your less file in VS, editing the file, then "crunching" (or saving) it over your CSS stylesheet. No need to touch the pure CSS generated by crunch.

score -1 · Answer 8 · answered Oct 16 '12 at 13:03

-1

Nobody has mentioned Web Essentials 2012:

http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6

answered Oct 16 '12 at 13:03

Carlos Martinez T

6,458
1
34
40

I believe that extension is compatible with VS 2012+ – Alfero Chingono Nov 26 '12 at 13:32

score -6 · Answer 9 · answered Jun 09 '11 at 21:40

-6

I had to make add a MIME-type to my IIS server like this:

Extension: .less

MIME type: text/css

answered Jun 09 '11 at 21:40

KristianB

1,403
3
25
46

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

9 Answers9

Linked