Installing SASS and compass on Mac 10.11 (El Capitan) with MacPorts

Sass icon

SASS/Compass with MacPorts on El Capitan. This is mostly a note to myself

When updating to El Capitan, my compass and sass installations had disappeared once again. But when I tried to just install the compass and sass gems with the system's build-in Ruby, I got a bunch of error messages like the ones shown here:

$ sudo gem install -n /usr/local/bin compass
 
Ignoring psych-2.0.13 because its extensions are not built.  Try: gem pristine psych-2.0.13
Ignoring json-1.8.2 because its extensions are not built.  Try: gem pristine json-1.8.2
    Compass is charityware. If you love it, please donate on our behalf at <a href="http://umdf.org/compass">http://umdf.org/compass</a> Thanks!
Successfully installed compass-1.0.3
Parsing documentation for compass-1.0.3
Done installing documentation for compass after 2 seconds
1 gem installed
 
$ compass -v
Ignoring ffi-1.9.6 because its extensions are not built.  Try: gem pristine ffi-1.9.6
Ignoring bigdecimal-1.2.7 because its extensions are not built.  Try: gem pristine bigdecimal-1.2.7
Ignoring ffi-1.9.6 because its extensions are not built.  Try: gem pristine ffi-1.9.6
Ignoring json-1.8.2 because its extensions are not built.  Try: gem pristine json-1.8.2
Ignoring libxml-ruby-2.8.0 because its extensions are not built.  Try: gem pristine libxml-ruby-2.8.0
Ignoring nokogiri-1.6.6.2 because its extensions are not built.  Try: gem pristine nokogiri-1.6.6.2
Ignoring psych-2.0.13 because its extensions are not built.  Try: gem pristine psych-2.0.13
Ignoring sqlite3-1.3.10 because its extensions are not built.  Try: gem pristine sqlite3-1.3.10
Compass 1.0.3 (Polaris)

While it was possible to compile my sass code (working on a Zen subtheme), the compiled css screwed up the layout completely. I knew from experience that Compass v. 1.0.1+ doesn't work with Drupal Zen grids. Using "bundler" has been the easiest solution to this problem. (See comment #18 at https://www.drupal.org/node/2188263). However, bundler wouldn't install on my system.

Here is a typical error message when trying to install bundle. (I wonder if this has anything to do with El Capitan's new SIP feature?):

$ sudo gem install bundler
Password:
Ignoring psych-2.0.13 because its extensions are not built.  Try: gem pristine psych-2.0.13
Ignoring json-1.8.2 because its extensions are not built.  Try: gem pristine json-1.8.2
Fetching: bundler-1.10.6.gem (100%)
ERROR:  While executing gem ... (Errno::EPERM)
    Operation not permitted - /usr/bin/bundle

Since I already have MacPorts installed on my machine, I thought to give it a try and install everything I need through it. It turned out to be fairly painless. Here are the steps, in case I need to reproduce:

1) This installs ruby 1.9 as well, since bundler depends on it:

sudo port install rb19-bundler

(Note: run the command "bundle-1.9" to use MacPort's bundle version. Or, create a symlink bundle->bundle-1.9 in /opt/local/bin)

2) Install compass and sass:

sudo port install rb19-compass

sudo port install rb19-sass

3) Use bundler to compass-compile your sass code in your theme directory You need to place a text file (named Gemfile) that describes the versions of various gems that work with Zen grids into the root of your theme directory. (E.g. sites/all/themes/my_theme/Gemfile.) Here's a copy of the working stack:
source "https://rubygems.org"
# Working stack for Zen, from https://drupal.org/node/2188263#comment-8567655
gem "sass", "3.2.14"
gem "compass", "0.12.3"
gem "zen-grids", "1.4"
gem "breakpoint", "2.0.7"
gem "susy", "2.0.0.alpha.4"
gem "sass-globbing"
gem "sassy-buttons"

Now, tell bundler to install the gem versions as defined in the Gemfile. Run:

sudo bundle-1.9 update

Now, run compass through bundler, while in the theme's directory. To compile your sass code, run:

bundle-1.9 exec compass compile

Or, to watch the sass directory for changes, run:

bundle-1.9 exec compass watch

Category: 
Code