Using Sass and Compass with Omega 3.x

Last updated February 27, 2013. Created by Mark123 on October 10, 2012.
Edited by bisonbleu, screenack, wheatpenny. Log in to edit this page.

Sass is a CSS pre-proccesor, 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.
Instructions for installation of Sass and Compass may be found at the Compass website. Note however, that at least for the Mac, the command listed there of gem install compass improperly installed files for me. Adding 'sudo' was necessary: sudo gem install compass.
Once Sass and Compass are installed, the following instructions will incorporate them into an Omega subtheme.

1. The upcoming Omega 4.x release places the compass installation in the subtheme root directory, so we will too. (Therefore, the compass configuration file 'config.rb' is in the root, and there are /css and /sass subdirectories.)
   cd /path/to/drupal/sites/all/themes/<theme-name>
2. Create a bare compass setup matching the above description, using these command parameters:
   compass create . --sass-dir=sass --bare
3. Open config.rb and change
   css_dir = "stylesheets"
   to
   css_dir = "css"
4. Copy your Omega CSS files from the /css subdirectory to the /sass subdirectory, and change the extensions to ".scss".
   
   cp css/*.css sass
cd sass
for file in *.css; do mv "$file" "${file%.css}.scss"; done
5. Create a 'base partial' file that contains sass code that all files should inherit, such as @import statements (for importing Compass or other libraries) and global variables such as color values. 'Partial' files, beginning with an underscore, are not compiled into CSS files themselves, but are imported into other .scss files. Make sure you're in the [theme_name]/sass directory. Then run the following command.
   touch _base.scss
6. Edit each .scss file, and place this snippet at the top: @import "base"; which will import _base.scss.
   • If your *.scss have no styles, use this to automate this step from theme's root: echo '\n@import "base";' >> sass/*.scss
7. Compile your sass files.
   Return to the root directory of your theme, where config.rb is located. cd ..
   Compile your theme with either:
   compass compile --trace (without the --trace parameter, files with errors are not identified)
   compass watch --trace

You now may add code to your .scss files. Tutorials can be found at the Sass and Compass websites, as well as Stylesheets - Drudgery = Compass + Sass.
Help for command parameters can be found with: