SassAndCoffee !=

 

So what IS SassAndCoffee? From the author’s (Paul Betts) blog post:

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.

I’ll go into more detail about the features of SassAndCoffee momentarily, but lets start with getting it into your project in Visual Studio.

You could grab the project form GitHub and compile it yourself but the simplest way to include the assemblies needed is through NuGet

SassAndCoffee’s NuGet project also adds some entries in your web.config:

 <system.web>  
     <httpModules>
       <add name="CompilableFileModule" type="SassAndCoffee.AspNet.CompilableFileModule" />
     </httpModules>
 </system.web>

 

<system.webServer>
    <modules runAllManagedModulesForAllRequests="true">
      <remove name="CompilableFileModule" />
      <add name="CompilableFileModule" type="SassAndCoffee.AspNet.CompilableFileModule" />
    </modules>
</system.webServer>

 

Once this is complete, just create a .scss or .coffee extension file in your project and reference it from your HTML as if it were already interpreted as .css or .js respectively. We’ll go into more detail on this.

The main features you get from SassAndCoffee are as follows:

• Easy setup: No need to install Ruby or node.js or anything else. Everything that is required is included in the NuGet project.
• Automated compilation: simply add .scss or .coffee files to your project and reference them in HTML as you normally would (as .css or .js files) and SassAndCoffee handles the compilation and output linking at runtime.
• Automated minification: minify your output files as well as other .js and .css files in your application with a simple naming convention.

Now let’s check out an example with Sass using the file SassAndCoffeeDemo.scss:

@mixin customDivText($size){
    font: {
        weight: bold;
        size: $size;
    }
    text-align: right;
}

 
div.big{
    @include customDivText(70px);
}

div.bigger{
    @include customDivText(150px);
}

Index.cshtml:

<div class="big">Big</div>

<div class="bigger">BIGGER</div>

_Layout.cshtml:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" 
type="text/css" />

Now our output looks this in the browser:

And SassAndCoffeeDemo.css contains:

 

div.big {
  font-weight: bold;
  font-size: 70px;
  text-align: right; }

div.bigger {
  font-weight: bold;
  font-size: 150px;
  text-align: right; }

Let’s try a “Hello World” in Coffeescipt. I’ll add the following code to a file named SassAndCoffeeDemo.coffee.

helloCoffeeScripters = (name) -> 
alert("Welcome to Coffeescript, "+ name)

 
$ ->
	helloCoffeeScripters ("World")

And refrence it in my _Layout.cshtml master page:

<script src="@Url.Content("~/Scripts/SassAndCoffeeDemo.js")" 
                        type="text/javascript"></script>

When we run our app we should see the following:

When we view the source of our .js file we see that the Coffeescript compiler has emitter the following javascript:

var helloCoffeeScripters;
helloCoffeeScripters = function(name) {
  return alert("Welcome to Coffeescript, " + name);
};
$(function() {
  return helloCoffeeScripters("World");
});

Now lets consider the other SassAndCoffee feature that tends to get overlooked, Minification. If we change the Coffeescript file name in our _Layout.cshtml file to include “.min” like so:

<script src="@Url.Content("~/Scripts/SassAndCoffeeDemo.min.js")" 
type="text/javascript"></script>

Then when we compile and view the source of our file we will see:

var helloCoffeeScripters;helloCoffeeScripters=function(a){return alert("Welcome to Coffeescript, "+a)},$(function(){return helloCoffeeScripters("World")})

The beauty of SassAndCoffee is in the amount of attention that you DON’T have to pay to it. It just works! Import the NuGet project and you can get to the business of learning how to use Sass and Coffeescript right away.

Refrences:
https://github.com/xpaulbettsx/SassAndCoffee
http://nuget.org/List/Packages/SassAndCoffee
http://sass-lang.com/
http://jashkenas.github.com/coffee-script/

Thanks to @alamocoders for letting me present this topic at their last .NET meeting. I had a blast. Here are the materials from the presentation if anyone is interested. It includes the source code and my slide deck.
http://dubmun.com/projects/SassAndCoffeeDemo.zip