Why Sass?

Sass is an amazing and feature-rich way you create your site's stylesheet. You can learn more about it on the Sass website. Some of the Sass features that Omega utilizes out of the box include:

Mixins

These are styling functions and include omegaShadow, which when included in a style will automatically add a standardized box shadow. And omegaCorners which allows you to easily add a border radius using a variable like this:

Using Sass and Compass is really easy. Just follow these steps to get started.

Foundation Settings

Before you start theming and styling away, be sure to check out the _settings.scss file. From there, you're able to change styling with a change of just a few sass variables and change the look and feel of the page without actually doing much styling.

The Zurb Foundation docs provide a template and boilerplate for all these variables. It's also well documented.

Installing Sass

Sass can be installed once you have ruby or the rubygem installed.

Compiling Sass

Sass files will not compile automatically. If you wish to compile the files, and generate usable CSS files you have two options:

1. One-time compile:
   
   $ compass compile "path/to/zurb-foundation-child-theme"
2. Compile on every file save:
   
   $ compass watch path/to/zurb-foundation-child-theme
3. This command can also be run from within the Zurb Foundation theme directory where your config.rb file is located.
   
   $ compass watch .

Debugging Sass

You can also invoke debug settings so that you can use firesass to easily debug changes.

Caveat: There are different versions of Foundation

Don't forget to uninstall earlier versions of Foundation because otherwise you'll get an "No such framework: foundation" error. See this google issue.

Sass is a CSS pre-processor, and Compass a library of Sass code. While both will be part of Omega 4.x, you can incorporate them into 3.x as well without much difficulty.

What new features are planned in next stable release.

Links

• Meta issue about documentation coverage http://drupal.org/node/1744592