Using SASS Compass in a Visual Studio SharePoint Project

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

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?

Sass is an extension of CSS3 which adds a lot of cool features to make your stylesheets easier to organized and maintain. Now, Compass is a framework for CSS that uses SASS. Simple right?

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:

  1. Create a new SharePoint project.
  2. On the solution Explorer, right click your project name.

    SharePoint Project + Sass

    Sass and Visual Studio 2012

  3. Click Setup Compas Project (A stylesheets and a sass folder are added along with a config.rb file)

    Sass default files in SharePoint

    Sass default files in SharePoint

  4. Add a SharePoint Mapped Folder to Layouts (Right click on project name, Add – > Mapped Folder)

    Layouts Mapped Folder

    Layouts Mapped Folder

  5. Rename Layouts to _layouts
  6. Move your sass and stylesheets folders inside _layouts. Optionally add an Images and a JavaScript folder here.
  7. 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”
    javascripts_dir = “_layouts/js”

  8. Edit or add a scss file and make sure the generated .css files are updated under the stylesheets folder.

    Sass SP Project Structure

    Sass SP Project Structure

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather
Posted in SharePoint 2010, SharePoint 2013 Tagged with: , ,

Leave a Reply

Your email address will not be published. Required fields are marked *