64

Visual Studio 2013 is awesome, now with syntax highlight and autocomplete for .less files. But does it also generate the respective CSS files? Do I need to install other extensions for that?

Lucian
  • 3,981
  • 5
  • 30
  • 34

6 Answers6

33

Yes. While Visual Studio 2013 doesn't come with a LESS compiler built-in (so you'll need to bring your own), you can either use an external compiler, or install an extension so you can compile your LESS files from within the IDE.

TylerH
  • 20,799
  • 66
  • 75
  • 101
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    FYI. I have VS 2013 Pro and Installing Web Essentials threw the exception: VSIXInstaller.NoApplicableSKUsException: This extension is not installable on any currently installed products. I installed Koala instead. – John Bonfardeci May 30 '14 at 16:47
  • 2
    @jtbon2: Hm, it appears that Web Essentials is broken for a lot of people. To be honest I haven't had the opportunity to try it myself. I'll remove this specific recommendation from my answer. – BoltClock May 30 '14 at 16:51
  • 1
    Thank you. BTW, the SassyStudio VS extension does work very nicely. http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d – John Bonfardeci Jun 28 '14 at 16:41
24

If you don't want to install plugins in your Visual Studio, you can use an external compiler.

Currently I'm using Koala, every time you save your LESS file he will compile it automatically in your output folder.

Take a look at the official LESS page about GUI Compilers.

seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
Wellington Zanelli
  • 1,894
  • 3
  • 18
  • 43
  • 1
    Currently having [issues with Web Essentials LESS implementation](http://stackoverflow.com/questions/29826426/less-occasionally-unable-to-compile) so I'll give Koala a try. – lee_mcmullen May 14 '15 at 13:04
6

I had trouble compiling Bootstrap LESS (after installing the Twitter.Bootstrap.Less NuGet).

The trick with WebEssentials is to cause the bootstrap.less file to need saving (typing a space, then pressing delete is sufficient), then saving it. The corresponding .css, .min.css and css.map files are automatically generated and appear nested under the .less file in Solution Explorer.

NickBeaugié
  • 720
  • 9
  • 17
  • This is key to kick-starting productivity with LESS and Visual Studio! Was stuck at the first hurdle because of this undocumented requirement. I tried to put together a quick start example in this similar Q&A http://stackoverflow.com/questions/27093257/how-to-compile-bootstrap-less-source-in-vs-2013 – Tony Wall Apr 11 '15 at 14:22
4

Easy:

  1. Tools->Extensions and Updates-> Install Web Extension Pack(Mads Kristensen's)
  2. On Project, Add->New Item-> Less Style Sheet
  3. Edit the .less and save the file
  4. Right Click on the .less file-> Web Compiler-> Re-Compile File

Afterwards the resulting .css file will be generated on every file save.

Jorge Goncalves
  • 61
  • 3
  • Hello Jorge, my VStudio 2013 has Web Essentials. I try to do your step 1, but don't see Web Extension Pack. Then I can do step 2 and 3, but cannot do your step 4. I do right click on the .less file, but didn't see Web Compiler. Maybe this is why whatever code I write in .less file doesn't generate to .css file. Please help. Thanks – abcid d Dec 03 '15 at 15:58
2

Another small tool to compile LESS after it has been saved is WinLess.

Not much options but small and simple. And it does the job!

http://www.winless.org/

Don't know what the experience of other users is, but WebEssentials 2013 does not work well on my machine with Visual Studio 2013 (Ultimate) and the settings, well... No UI and can't turn features completely off which i don't want to use.

jao
  • 18,273
  • 15
  • 63
  • 96
Chieleman
  • 83
  • 5
0

You can also use Chirpy which allows editing of many modern web technologies that MS missed.

http://chirpy.codeplex.com/

Erdogan Kurtur
  • 3,630
  • 21
  • 39