Sass for the Non-Ruby User

Posted by: TomS on November 17, 2012 @ 10:05 am

A while back, I had heard about Sass (Syntactically Awesome Style Sheets), and I was intrigued at the ability to apply higher level re-use concepts to CSS.  I checked out there website, saw the dependency on Ruby for using it and was a bit turned off, however.  I don’t often use Ruby, and I wasn’t quite ready to plod through the install for some efficiencies in CSS authoring.  And thus, Sass was quickly forgotten.

More recently, I attended Barcamp Philly 2012, and saw John Riviello‘s talk on using Sass, Compass, and Lint.  My curiosity returned, and now with a free weekend, I wanted to document the process of getting Sass working with only minimal messing around with Ruby.  Let’s call this Sass for the Non-Ruby User.

As a side-note, I was running Ubuntu when I did this, but the instructions are somewhat OS independent and should work fine anywhere you can run bash.

Step 1: Install Ruby

Really, there’s no other way around this.  If you want to use Sass, you have to install Ruby.  It’s not required as a run-time dependency, but you will need it to parse your Sass and generate the resulting CSS files at build time at the very least.

I’ve got nothing against Ruby, I just don’t use it often, so my goal here is to get Ruby installed and working with only the minimal steps.  Going to an OS’s package management solution is always an option (yum, rpm, apt, etc.), but I decided to checkout RVM, the Ruby Version Manager.  One of the nice things about this approach is that it only installs Ruby in your home directory.  It’s not a system wide install, so for trying things out, it’s pretty localized.  It also allows you to manage having multiple versions of Ruby installed.

To get started, you download the rvm installer.  The installer will unpack rvm to your ~/.rvm directory and also configure your shell profiles to load a number of rvm commands into your shell.  You will need to either relaunch your shell or source the ruby config that is added at ~/.rvm/scripts/rvm.  I use the GNOME terminal, so I also had to configure the terminal to “Run command as login shell” as described here.

The simple script below will download and run the installer.

curl -L | bash -s stable

The first thing you’ll want to do is run the following command.  It will list any additional dependencies that are required on your operating system to use Ruby with rvm.

rvm requirements

Read the output of this and run any necessary commands.  For me on Ubuntu I had to run:

sudo apt-get install build-essential openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev ncurses-dev automake libtool bison subversion pkg-config

Next you’ll want to install a version of Ruby.  As of the time I wrote this post, 1.9.3 was the latest stable build.

rvm install 1.9.3

This takes a while, but this simple line will download and compile ruby 1.9.3.

Next up, I want to specify that I want to use the Ruby version I just downloaded.

rvm use 1.9.3

This will adjust the path of your shell to use the Ruby version specified.  You should see a line stating: Using /home/tom/.rvm/gems/ruby-1.9.3-p327.

You can also verify that this worked by running

which ruby


You will need to re-run the rvm use command each time you launch your shell, or you may add it to your shell profile to be run at startup.

Step 2: Install Sass

This is where it get’s pretty easy.  Ruby has a gems system similar to a package manager for most operating systems.  To install Sass, just run

gem install sass

Step 3: Use Sass in Watch Mode (for development)

Browsers can’t read sass files, but sass will do the job of converting these files into plain old css files for you.  Running a command every time you want this done though can be a drag when developing.  Sass has a ‘watch’ mode that will watch for changes on a directory of sass files and convert them to css files in another directory.  Follow the steps below to set up a quick example of this.

#make a directory for the sass files to live in
mkdir scss
#make a directory for the css files to live in
mkdir css
#start up sass in watch mode, looking for changes in sass and outputting to css
sass --watch scss:css

Now in another terminal window or editor, create example.sass in the sass directory.  Use the example content below.

/* example.scss */
#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }

After saving the file, you should now see the plain css file example.css with the content below in your css directory.

/* example.scss */
#navbar {
  width: 80%;
  height: 23px; }
  #navbar ul {
    list-style-type: none; }
  #navbar li {
    float: left; }
    #navbar li a {
      font-weight: bold; }


Step 4: Integrate Sass into your Build

It’s probably not the best idea to be running the watch command in a production environment though, of for build and deploy purposes, it’s best just to run sass once on your final scss files to create the css files and deploy them.  The command is nearly identical to the watch command above, just omit the watch option and add an update option.
sass --update scss:css

And that is pretty much it. Just add this command into your build tool of choice, and you’ve got Sass up and running.

Getting Started

Posted by: TomS on March 14, 2010 @ 8:36 pm

I’m up and running with a blog.  I plan on using this site as a place to post my thoughts and musings on things that interest me: mostly technology and running.

Over the next couple weeks or so I’ll be putting up a number of posts on how I got up and running with my own WordPress site and any of the customizations I threw in along the way.

Until then feel free to poke around the site.  There’s not much else, but more content will be coming soon.