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"
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
The only line will generate plenty of reset rules in output css