What does SassAndCoffee do?

SassAndCoffee is a library for ASP.NET (both MVC and old-school WebForms) that adds drop-in support for two new languages: Sass and SCSS, a language that allows you to write reusable, more structured CSS, as well as CoffeeScript, which is a JavaScript dialect that is much more syntactically elegant, but still preserving 100% compatibility with regular JavaScript.

How to use SassAndCoffee

• Add the package reference via NuGet
• Add a .coffee, .scss, or .sass file to your project (an easy test is to just rename a CSS file to .scss)
• Reference the file as if it was a CSS or .JS file (i.e. to reference “scripts/test.coffee”, you should reference “scripts/test.js” in your SCRIPT tag)
• To get the minified version of a file (either a coffee file or a standard js file), ask for the “.min.js” version (i.e. “scripts/test.min.js”)

Some things you don’t have to do

• Install any extra software, such as Ruby – everything is embedded in resources.
• Do any special configuration or make manual changes to your config files – NuGet will handle that.
• Run any commands to update the files – SassAndCoffee builds the files on the first request; if you make CSS / JavaScript changes, it’ll rebuild automatically.
• Do any special setup whatsoever when deploying – if it works on your box, it’ll work on the remote box (*)

* – a special note: VS2010 likes to mark CoffeeScript files as ‘do not deploy’ – make sure to hit F4 and mark them as content

What’s New in SassAndCoffee 0.8 – Minification and Combination

SassAndCoffee now supports JavaScript minification thanks to Mihai Bazon’s UglifyJS project – for both CoffeeScript files as well as your existing JavaScript files. It’s quite simple to use – anywhere you reference a JS file in your Views, rewrite the reference to “.min.js”.

It’s also a good idea to combine several Javascript files into one file to minimize requests – however trying to do this by-hand is a maintenance nightmare. To this end, SassAndCoffee will do this work for you. Here’s how to do it:

1. Open your View file, you probably have references to a bunch of scripts, whose source looks something like: @Url.Content("~/Scripts/jquery-1.5.1.min.js")
2. Copy the actual references (i.e. starting from ‘~’ on) to a file whose extension is “.combine” (i.e. ‘debug_all.combine’). These files don’t necessarily have to exist on-disk (i.e. they can be a CoffeeScript file). You can also just write a list of filenames, relative to the .combine file.
3. Reference the file as if it was a JavaScript file (i.e. ‘debug_all.js’)
4. If you change either the combine file or any file that it references, it will rebuilt – no need to rebuild anything by hand!

You can see an example of how this is used in the WebTest project on GitHub.

What else is new?

• Scripts are compiled/minified in parallel, improving performance. Unfortunately, minifying a significant number of scripts still takes a long time – this will be dramatically improved in the next release.
• Several bugs were fixed, such as fixing projects that didn’t have an App_Data folder, as well as a race condition where zero-length files could possibly be served up.