Sass (Syntactically Awesome Style Sheets) is a powerful CSS preprocessor giving you all the goodness of CSS plus lots of extra goodies. Want to use it with Visual Studio? No problem, here's how." />

Colin Bacon, web developer.

Syntactically Awesome in Visual Studio

Syntactically Awesome in Visual Studio

Sass (Syntactically Awesome Style Sheets) is a powerful CSS preprocessor giving you all the goodness of CSS plus lots of extra goodies. Want to use it with Visual Studio? No problem, here's how.

The Setup

Currently it is not possible to use Sass natively in Visual Studio, we need to help of an extension. Enter stage right Mindscape Web Workbench.

Mindscape Web Workbench allows you to use Sass, LESS and CoffeeScript in Visual Studio (2010 - 2013). Best of all it can be downloaded for free.

Mindscape Web Workbench - Visual Studio gallery

Setting up SASS in a new project

Once Web Workbench is installed, open your web project. Right click on the web project and select Setup Compass Project.

Setup Compass project in Visual Studio

Compass will create two folders in the root of the project, sass and stylesheets. sass is unsurprising where you will add your scss files. stylesheets is where the compiled css files will be generated.

sass and stylesheets folders

Personally I like to keep all my stylesheets in the Content folder rather than the root. To change this all we need to do is edit the config.rb file, also in the root of the project.

A simple configuration file, we can change the paths to Content/stylesheets and Content/sass. Now just move the created folders into the Content directory.

That it?

Your project is now good to go. Compass will automatically generate the CSS stylesheets when changes to scss files are saved. It's really that simple.