I started using Sass about a year ago and recently begun to integrated it with SharePoint branding projects. It really comes in handy when implementing responsive design. The below instructions work for SharePoint 2010 and 2013 on Visual Studio 2010 and 2012
So, what is SASS, Compass?
Setting up Visual Studio for Sass
Download Mindscape Web Workbench plugin for Visual Studio
Normally, in order to use Sass you would need to install Ruby before you can enable it on your command line. Or, there are quite a few desktop applications available, most of them paid. The full list is here. However, by installing the plugin above you can skip all that, and it is free.
Sass and SharePoint
With the plugin installed, configuring a SharePoint project to use Sass is quite easy. Follow these steps:
- Create a new SharePoint project.
- On the solution Explorer, right click your project name.
- Click Setup Compas Project (A stylesheets and a sass folder are added along with a config.rb file)
- Add a SharePoint Mapped Folder to Layouts (Right click on project name, Add – > Mapped Folder)
- Rename Layouts to _layouts
- Open config.rb and modify your paths to match your solution. It should look like close to this:
# Set this to the root of your project when deployed:
http_path = “/”
css_dir = “_layouts/stylesheets”
sass_dir = “_layouts/sass”
images_dir = “_layouts/images”
- Edit or add a scss file and make sure the generated .css files are updated under the stylesheets folder.