Using Compass framework with ASP.NET MVC application.

In my previous post I described how to start working with SASS using Mindscape Web Workbench.

In this post I am taking next step - start working with Compass - CSS Authoring Framework.

Immediately after installing Web Workbench, you can create/edit SCSS file, which are compiled into CSS. By default, Web Workbench compile SCSS files with SASS compiler.  But there is a trick:

Setup Compass Project

Right click on project node in solution explorer, then select "Setup Compass Project"

It will change your project by adding "sass" folder with "ie.scss", "print.scss" and "screen.scss" files and compass project configuration file "config.rb" in root.

"config.rb" is a Ruby file, contains configuration properties, such "css_dir" - the directory where the css stylesheets are kept and "sass_dir" - the directory where the sass stylesheets are kept.

From now, all SASS files, located in "sass_dir" will be complied by Compass compiler and, accordingly, CSS output files will be stored in "css_dir".

If you don't want to change your ASP.NET project layout, you might prefer to change Compass configuration.

I prefer to keep all SCSS files in separate directory, therefore I created "Content/scss" folder and moved existing *.scss files there.
Then I changed config.rb file as bellow:

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "Content"
sass_dir = "Content/scss"
images_dir = "images"
javascripts_dir = "Scripts"

Now Web Workbench recognizes scss files as part of Compass project and runs Compass compiler against them. Output css files remain in the same place, so no need to update views.

Get Magic of Compass

Just open Compass API references and start coding.

Lest consume one of basic features of Compass - Reset.

add following line in beginning of SCSS file

 @import "compass/reset";

The only line will generate plenty of reset rules in output css

Isn't it a magic?!

Compass has a lot of useful features, and all of them are available in your ASP.NET application.