Getting Going with Drupal Zen Theme

This week I am working on learnig the new Drupal Zen theme version 5.4.  It's a big change because this theme uses SASS and Compass natively for the theming.  

First, we need to install SASS and Compass on Ubuntu, my local build environment:
http://ndever.net/articles/linux/installing-sass-and-compass-ubuntu-1210-1304

Install Ruby and gems:

  • sudo apt-get install ruby-full rubygems1.8

Then install SASS and Compass:

  • sudo gem install sass
  • sudo gem install compass

I'm going to do the compiling on my local build, then upload the finished CSS files to my production environment.  No need for me to install SASS and Compass on the production server.  

We will be editing the SCSS files in the theme folder, and Compass will watch for changes.  When files change, Compass automatically rewrites the CSS files and saves them in the subtheme.  To get Compass watching, just navigate to the subtheme folder, and execute this command:

  • compass watch

Each time the script sees a change, it updates the files and reports the results to the terminal.  

>>> Change detected at 14:22:38 to: styles.scss
overwrite css/styles.css 
>>> Change detected at 14:24:01 to: styles.scss
overwrite css/styles.css 
>>> Change detected at 14:26:32 to: styles.scss
overwrite css/styles.css 
>>> Change detected at 14:36:28 to: styles.scss
overwrite css/styles.css

Once we are finished, we will package the files for production and rebuild the CSS completely from the SCSS files:

  • Edit the config.rb file in your theme's directory and uncomment this line by deleting the "#" from the beginnning: #environment = :production
  • Delete all CSS files by running: compass clean
  • Regenerate all the CSS files by running: compass compile
  • Commit all the files in the subtheme folder and check into the production site

That's it!