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”).

5. 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”)

6. 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.

7. 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.”

8. 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.

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.

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.