Skip to content

CoffeeScript, SASS and LESS compilation in Visual Studio 2010

I’ve been doing most of my development in Ruby on Rails over the past month and have fallen in love with the Asset Pipeline.  This is a process that lets you write in the new, more expressive forms and then compile and serve the raw CSS and JavaScript to the user.

The enhancements to CSS that are found in SASS and LESS are simply brilliant and save a massive amount of time.  Variables, nested selectors and mixins are just a few of my personal favourites.  CoffeeScript puts a wonderfully expressive veneer on top of JavaScript, removing lots of the grunt work and making your code much cleaner.

Using these improvements to the everyday languages has become second-nature and I’d be reluctant to go back.  Think about how much of a difference jQuery made to JavaScript DOM manipulation and animaton – you just wouldn’t want to go back to how it used to be!

However, my time is split between the Ruby on Rails world and the ASP.NET MVC world.  .NET doesn’t have native support for these new languages yet.  What’s a dev to do?

Thankfully, the lovely people of Mindscape have released a free Visual Studio plugin to take our pain away! The plugin handles CoffeeScript, LESS and SASS files, compiling them to native code every time you save your file.

New files created on save

It also adds new project items types to the ‘Add Item’ dialog and provides syntax highlighting within .coffee, .less and .sass files.

File types in Add Item

 

Simple and brilliant.  You can still link to your CSS and JavaScript files as you always have in HTML, or, as I do, use a NuGet package like Combres to combine and minify your files to reduce page load time.