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.
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.
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.
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.
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/sass. Now just move the created folders into the Content directory.
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.