Getting SASS-y with Foundation

Aten Room (Class 101)

There's a lot that goes into developing a custom responsive theme. Learn to how use Compass, SASS and the Foundation framework to simplify theming.

Just as Drupal uses php and a database to output html, theming frameworks use Compass and SASS to output css. What's the benefit? How about something like:

.benefits-include {
color: $site-green;

You can create variables, mixins and functions. You can nest selectors. Keep theming elements organized in a logical way (views theming in _views.scss; block theming in _block.scss).

Frameworks like Aurora and Zurb Foundation give your theme a powerful head start, including grids and many theme variables and functions.

We'll cover:

  • Installing Compass
  • Starting a Foundation 'project' (that's the beginning of your new theme)
  • Defining variables, mixins and functions
  • SASS basics: structure, nesting and compiling
  • How to turn a one column panels layout into a complex grid layout with just a couple lines of code
  • Using Foundation's built-in media queries to make your site responsive
  • .gitignore / deployment considerations
Experience level: 
Design and Front End