Bourbon & Sass

Bourbon & Sass

I have always hated working with CSS.  To me the syntax is often painful to look at, almost like I’ve gone down to a level within the plumbing that I explicitly hate working with.  Many years ago I let go of keeping up with web technologies and languages in favor of native apps and development, but now I find myself needing to find new tools to work with these things.  Enter the Sass language and Bourbon a framework that runs on top of it.

Let’s begin with Sass.  Sass stands for  “Syntactically Awesome Style Sheets” which is a way of saying that they want to make CSS files and their management easier.  Essentially you have a language that is compiled down to CSS in a programmatic way, making it “easier” to manage things like stylesheets or other fragments.  In this example I’m probably leveraging more of the Bourbon framework and its associated layers on top: Bitters, Neat and Refill.  We’ll talk about those a bit later.  First, lets get the environment all set up.

Setup

Before we get started I want to mention that most of this information is cobbled together from other sources available on the Net.  I’ve learned a lot by following other people’s tutorials, and I want to acknowledge them whenever I can in my docs.  Sass can be installed with a GUI front-end but I’m tying to continue to leverage my command-line based toolset as much as possible. Sass depends on Ruby, but I’m running OSX so Ruby is already installed.  Therefore I can run this bit of code and be off and running. 

$ gem install sass

Well, apparently not.  You might be inclined to “sudo” this command, but I think that’s a bad idea.  Here’s the root of the issue: The version of ‘gem’ and ‘ruby’ installed are both owned by by the owner “wheel” which in OS X is essentially the system administrator group in BSD which OSX is running on top of.  To a certain extent this installed version and its current location (/usr/bin/ruby) are available for other system services to rely upon.  We’d rather not really futz with any Ruby dependancies that another app might have, so we should probably install an alternative version.  Enter “rbenv” a simple environment manager that’s installable from homebrew.  FYI, the first line calling ‘brew update’ is just force of habit– who wants to install out of date packages? 

$ brew update
$ brew install rbenv ruby-build

Ruby & rbenv

Right from the docs on the rbenv we can now install and list a specific Ruby version (as of this writing 2.2.0 is the latest, and we’ll install that).

# list all available versions:
$ rbenv install -l

# install a Ruby version:
$ rbenv install 2.2.0

 The installation might take a bit and this runner lacks a status update.  Let’s say that it took a good 5 minutes for my installation to complete.

Ruby Install

Finally, we need to enable the autocompletion to our local profile.  As a quick aside, when we used Brew to make rbenv, it provided a list of caveats which is where I’m getting this information.  You can always look at the caveats again by running “brew info <pkg-name>”.  We have one line to add to our .profile (I use bash for my shell) which you can add using your favorite editor.  Once updated you can run ‘source’ on your profile to force an active reload in your current command prompt.

# Check for list of caveats from brew
$ brew info rbenv

# Abbreviated response:
# To enable shims and autocompletion add to your profile:
#  if which rbenv > /dev/null; then eval "$(rbenv init -#)"; fi

# Reload your current .bash_profile without opening a new prompt.
$ source ~/.bash_profile

After doing that, we need to let rbenv know which version we want to use.  As a caveat, I finally was able to get this command to execute by deleting a stray .ruby-version file in my home directory.

#Delete the old .ruby-version file
$ rm ~/.ruby-version

# Set the local version of Ruby to 2.2.0
$ rbenv local 2.2.0

# Rehash the Ruby version
$ rbenv rehash

# Verify which version OSX is going to use
$ which ruby
# Should return ~/.rbenv/shims/ruby

 Once this work is done we can finally install Sass via the “gem install sass” command.  Finally you can do a check of which version by running: 

#Which version of Sass are we running?
$ sass -v
 Sass 3.4.9 (Selective Steve)

Installing Bourbon

Our next step is to install the Bourbon gem and the other utils on top of it: Bourbon, Neat, and Bitters.

# Install Bourbon, Neat, and Bitters from gems
$ gem install bourbon
...
$ gem install neat
...
$ gem install bitters

I’ll stop here and finish this one later.  However, the tutorials on the Bourbon and Refill’s site specifically are awesome.  They’ll get you started with everything you need.