Creating Mobile First Responsive Themes With Sass, Compass and Susy

We'll walk through how to set up a simple custom, mobile first, responsive theme using Sass, Compass, and Susy. No prior experience with any of these tools is required - we'll start from the install and setup and end up with start on a new custom theme.

This session is going to focus on the mechanics of setting up Sass, Compass, and Susy on a bare bones custom theme. We'll also go over some best practices, workflow, and talk about some alternative libraries and tools you may want to consider. We won't be getting into any details of the three libraries, if you want to get a good overview of all the awesomeness that is in Sass and Compass you'll also want to go to Andrew Koebbe's talk on So Sassy! An Intro to Sass and Compass.

Post session update: A couple of folks asked why I used Guard when both Sass and Compass have their own file watchers. The answer is - I use Guard because I normally use Livereload as well as the file watcher. If you only need a file watcher you don't need to use Guard, you can just use "bundle exec compass watch" instead of the "bundle exec guard" command that I used in the presentation.

The slides from the presentation can be found at

Experience level: 
Request Reference: 
Session Time Slot(s): 
Friday, July 18, 2014 - 14:15 to 15:00


Platinum Sponsors

Gold Sponsors

Corny Jokes

Why did the Drupal site sell its data? Because they needed the cache. -Anonymous (not verified)

View Corny Jokes | Submit your own Corny Joke