Skip to content

Using SASS with SharePoint

If you do any kind of development and haven’t heard of SASS, you must be living under a rock! SASS has taken the CSS world by storm (which I use the SCSS syntax but for familiarity I’ll reference SASS, and this solution should work with either syntax). It has brought us variables, functions with logic (mixins), selector inheritance, breaking up your CSS files (partials) and a whole lot more.  If you work with SharePoint you’re probably feel like you’re the guy at the party who doesn’t get to hang out with the cool kids because you don’t get to use these technologies. Well, no more!

I was determined to find a way to use the power of SASS with SharePoint. It took a little experimentation, but the process is actually pretty easy. It even works with SharePoint 2010 and 2013 and even Office 365! Here is how I got it to work in each environment.

SharePoint 2013: On-Prem and Office 365

My astute readers are probably thinking: “I bet he’s using design manager.” You’d be right. The process is pretty simple. We are going to use an application called Prepos that handles all the compilation of the SASS files (and if you’re adventurous other compiled languages like CoffeeScript). The app is free to use with pro features for a purchase, but we won’t need the pro features for this post.

  1. Map a network drive to your /_catalogs folder. Design manager will give you that URL if you go to Site Settings » Design Manager » Upload Design Files (if you don’t see a Design Manager link you either don’t have the permissions or publishing is not enabled). If you don’t know how to mount a network drive see these instructions from Microsoft. (As a note, I’m also an avid Mac fan, but I doubt many people would even want to do this on their Macs.)
  2. Download and install Prepos.
  3. Create a folder locally for your project, and create a file inside of it. You can name it whatever you want, but be sure it has a .scss extension is using SCSS or .sass if using the original SASS syntax (if you don’t see extensions you can enable them in Windows Explorer).
  4. Open Prepos and drag your project folder into the left hand side of the application. You should see your folder name listed (in my case it’s “sp-sass”).
Prepos Folder Listing
Prepos Folder Listing
  1. If you do it correctly Prepos will recognize your SASS file and list it in the center column. Hover over the output link to change the output path. Here you will browse to your network drive and place it where you want it. Name the file as well (in my case it’s “sp-sass.css”)
Change Prepos Output Path
Change Prepos Output Path
  1. Now we need to set the project URL for live refresh to work. Live refresh does what it sounds like: after you save your SASS file, Prepos will automatically compile and refresh your browser. Note that live refresh only works in Chrome for the free version using a Chrome browser extension. The pro version is supposed to allow it to work in other browsers, but it seemed to work with my default browser. Your mileage may vary. To set the project URL click the cog in the lower left of the folder listing.
Project Options
Project Options
  1. You will then be presented with a modal dialog where you can check “Live Refresh” and “Use Custom server.” Put in the URL for your SharePoint server. Then click “Close.”
Custom Server URL
Custom Server URL
  1. We need to compile our SASS file for the first time. To do this, right click on your SASS file in the file listing and click “Compile File.” Now you can open up your server through Prepos by clicking the globe icon next to the project options icon we clicked earlier.  Be sure to check your file in Windows Explorer that it compiled correctly. Also, from now on just make changes to your SASS file in your favorite editor, save it, and Prepos will automatically compile it and refresh your browser! If you have any SASS syntax errors Prepos will alert you, and you can look at the output log.
Compiling for the First Time
Compiling for the First Time

As a final note, I had a problem getting live refresh to work with Office 365 but none for on-prem. Prepos needs to be able to send HTTP notification headers and perhaps Office 365 doesn’t allow this? Regardless, it still compiles just fine.

SharePoint 2010

SharePoint 2010 will use all the same steps as above, but instead of using Design Manager to mount access to all your design assets, you can mount any library. In this case we will use the Style Library. When you go into the library you will be presented with an option underneath the “Library” tab in the ribbon called “Open with Explorer.” Use that URL to mount a network drive.

Open with Explorer
Open with Explorer

You could also use this methodology for either 2013 or 2010 and publish files locally to the /_layouts folders if you so desired. In that case you would simply change the output path to the right folder on the server.

Conclusion

To me this is very exciting, and it really opens up a whole new world of CSS usage with SharePoint. I look forward to using this going forward and contributing to the larger SASS community. I will also be posting more of what I learn about SASS practices and usage on this blog in the future.

Published inSharePointUser Interface

8 Comments

  1. Evgenia

    Chris, you made my day and Sharepoint – SASSy!
    Thank you!

  2. Gavin

    Have you managed to breakdown corev4 or core15.css into sass partial files?

    I’ve just started a new job working with sharepoint 2013 and learning the best way of managing changes and Sass is something i really want to implement (along with a responsive grid)

    As you may know in IE 6 – 9 stylesheet rules are limited to:

    4095 rules
    @import up to 31 sheets
    @import nesting supports up to 4 levels deep

    Do you know how many rules the main corev4/5 has?

    • Oh heavens no, and I suggest you not try either. Just let it be. I am interested in taking a subsection of the core stylesheet however for just the ribbon.

      Those import rules only apply to the CSS stock @import not SASS partials as far as I know.

  3. Gavin

    yea.. thought as much (leaving corev4/15.css as is). I;m applying the foundation framework to a sharepoint publishing site (to get to grips with it) so using Sass quite heavily.

    I suppose i wouldn’t be hitting the 4095 rule limit unless i imported the corev4.css as a sass partial (this file alone contains over 2000 rules) and then included all the foundation framework files and any other custom compass files and compile into 1 file. In that case i found out you can use bless css to handle that

    http://blesscss.com/

  4. Muhammad Saleh

    Can you please update the article and let the people know that the “Open with explorer” option is only available when you browse the site with Internet Explorer ? :)
    Great article by the way.

    • That’s a good point, but I did in the beginning of the article say I was working with Windows only instructions.

Comments are closed.