Skip to content

Using Compass With Visual Studio for SASS work

Updated: at 06:34 PM

CSS for me has always been somewhat of a mystery to use in medium to large projects.  The idea of having to write individual classes and combine them in different ways to get affects seem to be beyond what I can keep in my head.  That is, if you have an html page with a body, the body has some div’s, nested div’s, header tags, etc, it can get really confusing to try and figure out how to author the CSS in a way it makes sense.  SASS comes to the rescue here.  It allows you to create variables, it allows you to create hierarchies of styles and just provides lots of conveniences that are otherwise difficult in CSS.  I won’t go into the details here, but simply provide a recipe of sorts for how to use it with Visual Studio.  For more information on SASS and Compass, check out these links.

To install Compass, you need to install ruby first, then compass from there.  Here are the steps in this article:  http://compass-style.org/install/

Now that you have compass installed, all you need to do is create a DOS prompt in your directory where you have your SASS file and type “compass watch”.

So, here is the workflow I recommend:

Create a directory structure in your Visual Studio Project with a Content Directly like this:

image

Then, from the command prompt in the Sass directory above, issue the command compass watch as follows:

image

I also suggest that you  create a config.rb file like the following in your Sass directory.

image

By having output_style :expanded and environment :development, the css created will be readable and it will have line numbers that reference back to your Sass file for debugging.  That is, when you look in your browser development tools css explorer, you will see the CSS file generated and not your SASS file.  this will help you to make fixes to the SASS file directly without having to hunt.

HTH’s!