About a year ago, I was working on several SharePoint 2010 and SharePoint 2013 branding projects that required implementing a great deal of responsive design. To make my life easier (and the projects simpler to maintain), I integrated SASS Compass into SharePoint through Visual Studio. Here’s how.

 

What is SASS? What is Compass?

SASS stands for Syntactically Awesome Style Sheets, a powerful language extension that helps to generate and format CSS. (I’m not going to wade into the SASS v. LESS debate; our UI developers here at DEG use SASS, so my decision was made for me.) I like using SASS because it means less writing and easier organization of files. Compass is a framework with tons of tools and templates that help you use SASS. Visual Studio, of course, allows you to create apps for Microsoft platforms.

What follows is a dive into configuring SASS work for SharePoint 2010 and 2013 on Visual Studio 2010 and 2012. (The VS2013 update 2 released on 3/28/2014 did add SASS support.)

There are two major steps: Setting up Visual Studio for SASS, and then configuring your SharePoint project to use SASS.

 

Step One: Set up Visual Studio for SASS

This is very straightforward. Download the Mindscape Web Workbench plugin for Visual Studio. Normally, 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’s free.

 

Step Two: Configure SharePoint to use SASS

Once the plugin is installed, configuring a SharePoint project to use SASS is, again, a straightforward process:

  • Create a new SharePoint project.
  • On the solution Explorer, right click your project name.
Implementing SASS Compass in SharePoint

Sass and Visual Studio 2012

  • Click Setup Compass Project (A stylesheets and a SASS folder are added along with a config.rb file)
Implementing SASS Compass in SharePoint

Sass default files in SharePoint

  • Add a SharePoint Mapped folder to Layout (right click on project name, Add -> Mapped Folder)
Implementing SASS compass in SharePoint

Layouts Mapped Folder

  • Rename Layouts to _layouts
  • Move your sass and stylesheets folders inside _layouts. You have the option of adding an Images and a JavaScript folder here, as well.
  • 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”

  • Edit or add a .scss file and make sure the generated .css files are updated under the style sheets folder.
Sass SP Project Structure

Sass SP Project Structure

And that’s it! You now have SASS Compass ready to go for your SharePoint 2010 or SharePoint 2013. Proceed as normal or, in the case of handling responsive design issues, you can proceed along a much less frustrating path with your files and media queries kept separate.

Have you tried SASS with SharePoint? How did it go for you?

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comments