UX Design and Development course

Installing Sass: the right way

Welcome to Sass. The world premier CSS pre-processor. All others fail in comparison. Really, when someone says, "It's just as good as Sass?" tell then that they are a LIAR!

Installing Ruby Sass

It is known that the instillation of Sass has been the door of opportunity for the other pre-processors. Namely, those that have been written in JavaScript. Ok, we get it. Not everyone is as excited about Ruby as we are o_O

Regardless. Today, there are two different 'official' versions of Sass. The original Ruby version and the coming of age C port of Sass called libsass.

Install Ruby Sass

Ruby Sass comes packaged as a Gem. For those of you who don't know, Gems are packaged librarys for the Ruby language. To install the Sass Gem, run the following:

$ gem install sass

Of course this requires that you have Ruby installed on your computer. If you do not, then that is something that you need to address. THIS is why installing Sass is 'hard'. This is why you also hear things like, "We have to support Ruby to process CSS?"

On modern Macs, Ruby is already installed. For Windows, this is something that you have to address.

Depending on how your Mac is configured with Ruby, you may need to install as a super user by running:

$ sudo gem install sass

This will require a computer password.

Installing Sass w/Rails

Rails is a much more complicated eco system for developing web applications. Rails comes pre-configured with a asset management utility called the Asset Pipeline. Because of this pipeline and another technology called Sprockets, Sass needs a little help.

Rails comes pre-configures to use Sass, so in the generated Gemfile you should see a reference to rails-sass. This is a wrapper for Sass in Rails that connects the pre-processor to Rails' Sprockets. You don't need to do much more then that, rails-sass has a dependency to Sass and will import the Sass Gem for you.

Installing Sass with everything else

Every other project on the planet that is not a Rails project will not natively support the original Ruby Sass. This has been a problem for years and one that many developers have struggled with.

To address this issue of application environment native support, libsass was born. libsass is written in C and so, with the proper wrapper, will be consumable by almost any development environment. At it's introduction, the creators of libsass wrote SassC, the C wrapper that will allow you to run a simple C app with libsass.

But, that's not really useful. The next most popular development environment is Node.js. To install libsass there is a dependency on Node.js being installed, it's JavaScript, the dependency chain is not as offensive to most as installing Ruby is.

Once Node.js is installed, this typically comes bundled with npm, so we need to run the following:

$ npm install node-sass

npm supports deeply nested dependencies, so when you run this package install you will notice that libsass piggy backed in this and the whole C library is installed there for you.