Many times if I look at css stylesheets of middle and big systems I tend to work with they just make me cry. Total chaos, code repetition, basically too much CSS. That’s why CSS preprocessors were invented. In the .NET world, the most popular right now is Less. However, for a long time, there is another player on the market - Sass. And that is what this post will be about - Sass along with ASP.NET (no matter MVC or Web Forms). If anyone doesn’t know what Sass is, check it out. In a nutshell, it is CSS preprocessor giving you much more power to create your stylesheets (nesting, mixing, variables, etc.). Blablabla… anyway in many comparisons to less, sass is the winner, but you will choose whichever you like more. There are some posts over the Internet describing how to use Sass with ASP.NET, but I want to show you how I’m using it and what I am trying to avoid.

Pre-requirements

Here is a simple list of what we need to start playing around with Sass:

  • Sass preprocessor engine
  • VS syntax highlight
  • browser debug tool

What I am using:

  • Compass which is using Sass as a preprocessor. You need to install ruby environment and then simply use your favorite console shell gem install compass
  • For syntax highlighting I am using Web Essentials - I highly recommend this extension. Sass support is a new feature there and soon will be much better.
  • For development, debugging - Chrome development tools (for firefox users - FireSass)

What I am avoiding:

Mindscape Web Workbench. Why??

  • It’s too heavy
  • “Go Pro” everywhere. I’m sick of it. Want to comment a line in your .scss file using VS’s shortcut (“commenting is only in pro version” WTF? Are you kidding me?)
  • It using compass so.. do not rely on some commercial tools, when it is soo simple to use what they are using.
  • That’s it

I recommend installing stuff I am using, but if you do not want to install ruby and compass manually and you are a classic console hater then you can start with Web Workbench (it is using compass so ruby will be installed anyway).

Let’s rock - basic app

You have everything set up, so let’s play. We don’t want to build a solution from scratch that’s why we will use twitter bootstrap nuget package.

First steps.

  1. Create new empty MVC 4 project.
  2. Install packages.

That’s it. Run your application and see what you got so far.

ASP.NET MVC 4 with Twitter Bootstrap and Sass

Now, our application is using standard css stylesheets. Our goal is to replace them with Sass files.

Sass goodness

I found out a nice port from Less to Sass bootstrap. Nice job guys! Sure we gonna use it.

If you have git, simply clone the repo, if you don’t… install git :]. Fine, if you don’t, just download the zipped repo.

Next steps.

  1. Delete all CSS files in Content folder.
  2. Create Content\Sass\Twitter directory and copy there all files from lib directory of cloned sass twitter port.

  3. Initialize compass project. Open console in the root folder of web application. compass init That will set up default compass project configuration. We need to change it a little bit. So now:

  4. Delete sass and stylesheet folder created in the root path.
  5. Edit config.rb file.
  1. Add application.scss file to Content/sass directory

We are now using one of compass built-in stylesheet (reset), main twitter bootstrap and reponsive stylesheet.

Let’s compile our stylesheets compass compile Now, in Content directory we have all the needed stylesheets.

Update application layouts to use application.css from Content directory.

delete followings

add only application.css

Run application to check out if everything is working as it should.

Playground

Before you start doing anything using Sass I recommend get familiar with its features - Sass tutorial. After that we can play around.

I changed “sing-up” page.

Move inline style from _BootstrapLayout.empty.cshtml layout into application.scss

Now change it a little bit using sass features (I’m using variables from twitter bootstrap here) and import twitter bootstrap and compass default reset stylesheet.

It will change design a little, but… so what. In this example, I want to show you the usage of variables, mixins and nestings.

I don’t want to create a sass tutorial here, so please just do what you want, do not hesitate to experiment.

Debugging sass

There is something that everyone hates in every code generating language like coffeescript, typescript, less and sass - troubles with debugging. Browser shows you some errors in specific line of code which have nothing to do with your original development files.

You can find some solutions to this problem.

For chrome browser (24+) there is an experiment sass support feature. Obtain how to use it - http://benfrain.com/add-sass-compass-debug-info-for-chrome-web-developer-tools/

For firefox you have FireSass extension. You will find instructions on how to use it on http://nex-3.com/posts/92-firesass-bridges-the-gap-between-sass-and-firebug

This solution requires adding two config lines to config.rb file

Sass compiling improvements

Finally, I want to give you a few tips on how to improve stylesheet generation.

Just type in the console

compass watch

And now everytime you change something in your sass files, the compass will notice this and your stylesheets will be recompiled.

You can also execute compass compile after your project compilation adding this to the end of the project file

Full solution

You can find end solution on github. That’s it, for futher reading I highly recommend The Sass Way