This Blog Is Now Sassy – Install Sass on WebFaction

This past Tuesday I presented at a local Web Developers’ User Group about CSS preprocessors, specifically LESS and Sass (my notes). The advantages of using a preprocessor are significant, including the use of variables to reduce repetition (DRY), mixins to share blocks of properties, functions, and operators. I’ve been interested in them for a long time (Sass was first introduced in 2007), but have never taken the plunge, despite reading articles about them in nearly every issue of .net magazine.

This weekend I finally took the plunge and set up Sass on this blog. My web host is WebFaction (I highly recommend). The process was quite simple, as expected.

First I had to create a directory to hold the gems (Sass is a Ruby script) in the root of my user directory. Ruby is already available on WebFaction accounts, but a couple variables had to be set prior to the Sass install, specifically GEM_HOME and RUBYLIB. Be sure to add the variable exports to your .bash_profile.

~/.bash_profile
export GEM_HOME="$HOME/.gems"
export RUBYLIB="$HOME/.gems/lib"
export PATH="$PATH:$HOME/.gems/bin"

Then I ran gem install sass, which quickly installed Sass. Running sass --help confirmed the successful install, and the real fun was set to begin.

After Sass was properly installed and confirmed, I copied the style.css file from my theme directory, and changed the extension to .scss. To compile this new file, all I had to do was run sass --style compressed style.scss style.css, which output the entire contents of my stylesheet to a new minified file containing a single line.

This amounts to little more than a party trick, although the pages now would load a bit faster, likely unnoticeably. To real advantage is using preprocessor features like variables and mixins. Here, Vim shined. I simply did a global search and replace for color codes to variable names, then set the color variables in a section at the top. Already, after a few simple commands, the stylesheet is more readable and easier to maintain.

:%s/#ffffff/$white/g

If you’ve been intending to start using css preprocessors for a long time, or if this is your first exposure, be assured that getting going is very simple, and the advantages significant. You can be up and running in just a few commands, and be harnessing all of the power of your fancy new preprocessor.

Leave a Reply