Compass Guard SASS setup for Bootstrap

Drupal Zen Sub Theme with Sass and Compass Quick Start

Drupal Zen Sub Theme with Sass and Compass Quick Start

Two full days of Google searching, theme uninstalling, registry rebuilds, Compass reinstalls, bundle inits, and countless gem tweakings left me with nothing usable!

I'll address the separate issue in the future, but if you've ever been greeted with any of the errors listed below, then theses "Quick Start" steps to getting your Drupal Zen sub theme with Sass and Compass up and running may just save your sanity. I created this article primarily for my own reference, but it help anyone out... cool. 

Errors I was beaten with and left crying to Google:

Could not locate Gemfile
PHP Fatal Error: Allowed memory size of 134217728 bytes exhausted
WARNING: Compass has changed how browser support is configured. The following configuration variables are no longer supported:
error sass/styles.scss
There are multiple files that match the name "print.scss"
Compass can't find any Sass files to compile
Compilation failed in 1 files.
It's not clear which file to import for '@import "print"'
failed to open stream: No such file or directory zen.drush.inc
Undefined variable: "$zen-reverse-all-floats"
Could not find gem 'susy (= 2.0.0.alpha.4) ruby'
Could not find proper version of compass (1.0.3) in any of the sources
While executing gem ... (Gem::DependencyRemovalException)

I did do my due dillegence and read a dozen our so tutorials and walk throughs on setting up Drupal Zen sub theme with Sass and Compass(henceforth named "DZ-SASS"... nah, calling it simply "DZ") but got confliting articles on the ORDER of how things are created and executed. Throw into the mix that half of the SASS and Compass articles are not Drupal related. These are the ones that are usually titled "Sass in 10 seconds" and contain 4 executable comand-line steps.

Requirements - you need to have command line access to your server and drush installed. I'm sure Google get you there... no idea what yo have to do if your on a GoDaddy-type ISP (one sec)... this just in, you CAN set up drush on GoDaddy! Google away.


These are the EXACT steps and execution order I used to get my DZs created, fingers crossed for all you out there! The execution lines are in green in case you want to ignore my commentary.

*** Contray to most of the articles I read, I had to create my Zen subtheme FIRST then compile my SASS/Compass stuff in to it. The example site name is "arizona"

1) Install Zen <get it>

    a) Copy (but do not enable) to the normal location - /sites/all/themes/zen

2) Create your subtheme

     a) wander over to /sites/all/themes
     b) use drush to make your sub theme. I killed the extra style sheets in this example
             drush zen arizona --without-rtl --path=sites/all/themes      (upadate 02.24.2015)

3) Install Ruby

     a) still in /sites/all/themes
            rvm install ruby-1.9.3-p448

4) Create you Compass inner-workings

     a) still in /sites/all/themes
           gem update --system
           gem install compass
     b) Build your Compass component inside you new sub theme, stay in /sites/all/themes
           compass create arizona
           *** It will complain about the folder already existing, just say yes a few times

5) Edit your new Gemfile

     a) jump down to /sites/all/themes/arizona and create the file = "Gemfile" (no file extention) in a text editor to contain exactly: (upadate 02.24.2015)

source 'https://rubygems.org'
group :development do
  # Sass, Compass and extensions.
  gem 'sass'                    # Sass.
  gem 'sass-globbing'           # Import Sass files based on globbing pattern.
  gem 'compass'                 # Framework built on Sass.
  gem 'compass-validator'       # So you can `compass validate`.
  gem 'compass-normalize'       # Compass version of normalize.css.
  gem 'compass-rgbapng'         # Turns rgba() into .png's for backwards compatibility.
  gem 'susy'                    # Susy grid framework.
  gem 'singularitygs'           # Alternative to the Susy grid framework.
  gem 'toolkit'                 # Compass utility from the fabulous Snugug.
  gem 'breakpoint'              # Manages CSS media queries.
  gem 'oily_png'                # Faster Compass sprite generation.
  gem 'css_parser'              # Helps `compass stats` output statistics.

  # Guard
  gem 'guard'                   # Guard event handler.
  gem 'guard-compass'           # Compile on sass/scss change.
  gem 'guard-shell'             # Run shell commands.
  gem 'guard-livereload'        # Browser reload.
  gem 'yajl-ruby'               # Faster JSON with LiveReload in the browser.

  # Dependency to prevent polling. Setup for multiple OS environments.

  # Optionally remove the lines not specific to your OS.

  # https://github.com/guard/guard#efficient-filesystem-handling
  gem 'rb-inotify', '~> 0.9', :require => false      # Linux
  gem 'rb-fsevent', :require => false                # Mac OSX
  gem 'rb-fchange', :require => false                # Windows

end

6) Get the correct gem versions of stuff to "play nice"

     a) jump down to /sites/all/themes/arizona , execute the following in order:
          bundle install
          gem uninstall sass
          gem install sass -v 3.2.10
          gem install compass
          bundle init

7) Cross your fingers and compile!

      a) still within /sites/all/themes/arizona , execute:

          compass init
          compass compile

At this point you may get a bunch of Compass variable errors which I'm currently cleaning up, more to follow. You are up and running if, at the end of the wave of error you see the pretty little line:

write css/styles.css

... and I hope you do.

I'll keep coming back to this article to update with information and corrections as I get more into the Zen of Zen, I mean DZ.