Installing Sass and Compass on Ubuntu

Sass is a pre-pre­proces­sor for CSS which I feel makes life eas­i­er. Com­pass is a CSS Author­ing Frame­work that adds com­mon­ly used mix­ins.

This arti­cle is about set­ting up Sass and Com­pass, but they in turn require Ruby, which means that the first part of this will deal with installing Ruby and RVM on your instal­la­tion. This arti­cle by Ryan Big­gs explains in detail how-to (and to a cer­tain extent why), so if you are inter­est­ed I high­ly rec­om­mend you to read through it.

If not, the TL;DR ver­sion (ter­mi­nal com­mands only) can be found below. First, how­ev­er, one of the key things of Ryan Bigg’s arti­cle:

Under no cir­cum­stance should you install Ruby, Rubygems or any Ruby-relat­ed pack­ages from apt-get. This sys­tem is out-dat­ed and leads to major headaches. Avoid it for Ruby-relat­ed pack­ages. We do Ruby, we know what’s best. Trust us.

If you already have Ruby installed, feel free to jump direct­ly to the Sass & Com­pass instal­la­tion below.

TL; DR

Based on Ryan Bigg’s update from Jan­u­ary 31st 2013. For Sass we do not need the Rails gem, so it will divert slight­ly from the arti­cle.

sudo apt-get update

# Curl is a "library and command-line tool for transferring data"
sudo apt-get install curl

# Installs Ruby Version Manager
curl -L get.rvm.io | bash -s stable --auto

# Reloads the profile - assumes you're using BASH!
. ~/.bash_profile

At this point, test to ensure that it rec­og­nizes RVM (for instance through run­ning rvm requirements). If not, you may want to run . ~/.bashsrc. The dif­fer­ence is in the scope of anoth­er arti­cle, though man bash is a good start, so’s googling it.

Requirements

DEPRECATED

The assump­tion for this arti­cle is that you are main­ly installing Ruby for the ben­e­fits to using var­i­ous gems such as Sass and Com­pass, so when run­ning rvm requirements you will be look­ing for the head­ing that includes For Ruby / Ruby HEAD and install all the pack­ages sug­gest­ed there, using sudo apt-get install. At the time of writ­ing they are the fol­low­ing:

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

Correct

rvm requirements now installs any miss­ing require­ments.

Installing Ruby (finally!)

If you’re intend­ing to use Ruby out­side of devel­op­ment with Sass, you are high­ly rec­om­mend­ed to read the arti­cle this sec­tion is a sum­ma­ry of, as it men­tions a few gotchas. For the pur­pose of Sass, those gotchas are irrel­e­vant.

rvm install 2.0.0
rvm use 2.0.0

If you want to be more exact, you can take note of the patch­lev­el in this way:

Run ruby -v. The out­put will be some­thing along the lines of ruby 2.0.0-p247 (2013-06-27 revision 41674) [x86_64-linux], where the p247 denotes the patch­lev­el.

rvm --default use 2.0.0-p247

Beyond this point the above arti­cle by Ryan Big­gs deals with Rails, so the TL;DR sec­tion is done for now.

Sass & Compass installation

This is the eas­i­est part of the HOW-TO, and can also be found on Com­pass instal­la­tion

gem update --system #gets the latest version of the RubyGems installer
gem install compass #installs any gem requirements (such as Sass) and then Compass

You’re done! At least with this bit. The series will con­tin­ue with oth­er parts of my devel­op­ment tools.


For the moment comments are not enabled, but feel free to reach out on Twitter.