Section 1: Setup

Step 1: Install Ruby

• Windows
  1. Go to rubyinstaller.org, and download and run the provided installer.
  2. Make sure that the Ruby executable is on your system PATH.
• Mac
  1. Congrats! You've already got Ruby installed. Continue to step 2.
• Linux
  1. Install using your systems package manager. If you were on Ubuntu, it might look something like this (Note, your package manager will more than likely install Ruby version 1.9.1. At the time of this writing, that **should** work for this tutorial but it is highly reccomended to download and build Ruby from sources for a version >= 2.x.x):

     $ sudo apt-get install ruby-full
     # ... a bunch will print out here, just enter 'y' at the prompt to continue
     Do you wish to continue? [Y/n] y
     # More stuff will print here, before returning to the prompt.
     $

Step 2: Verify Ruby and Gem installation

When you install Ruby, it includes gem, which is the Ruby package manager. Type the following into your terminal to verify your Ruby and Gem installation:

$ ruby --version
ruby 2.x.xpxxx (201#-##-## revision #####)
$ gem --version
2.x.x

# Don't worry about te xs or the #s.  They're placeholders.
# As long as you see version 2 or greater you should be good.
# Ruby 1.9.x and gem 1.8.x will probably work but it'd be better to upgrade when you can.

Step 3: Install Sass

Type the following into the command line to install Sass:

$ gem install sass
# if that doesn't work and you're on a unix based system try:
$ sudo gem install sass

Step 4: Verify Sass installation

Type the following into the command line to verify your Sass install:

># This is what you want to see
$ sass -v
Sass 3.4.22 (Selective Steve)

# If you installed a version of Ruby < 2.x.x, you'll probably see the following output:
DEPRECATION WARNING:
Sass 3.5 will no longer support Ruby 1.9.x.
Please upgrade to Ruby 2.0.0 or greater as soon as possible.

Sass 3.4.22 (Selective Steve)

If all of your terminal output matches what you see here, you're good to go! If not, consider retrying the install process OR visiting the Part 5 of this how-to where you'll find links to the official documentation for the technologies used here.

Background Information

For this section you're going to be installing / configuring the LibSass library and the SassC wrapper. As was mentioned previously, LibSass is a C/C++ rewrite of the Sass engine that provides insanely faster stylesheet compilation. Additionally, through the use of wrappers, LibSass makes writing and using Sass stylesheets a more portable option than the native Ruby library.

For our purposes, LibSass will enable us to demonstrate using Sass in the context of a Node.js application and the SassC wrapper will provide us with the ability to test and confim that we've got LibSass actually working on our system. Let's begin the install:

Please note: Getting this up and running on a windows system requires that you have Visual Studio Express 2013 or Desktop 2013 installed. If you don't have a copy, head here (https://www.visualstudio.com/post-download-vs/?sku=community&clcid=0x409&telem=ga#) to snag a copy of Visual Studio Community.

Step 1: Install LibSass / SassC

• Windows Install Instructions:
  1. Head here and follow the great instructions provided by the SassC team.
  2. Ensure that your newly built SassC executable is on your system PATH. You'll need to add the bin folder in the build directory that you specified when following build instructions.
• Unix Install Instructions:
  1. Head here and follow the simple build instructions provided by the SassC team. Important note: As of this writing, the build script used in step 3 has a bug. In order to fix that, you may need to run the following in your terminal before proceeding with step 3:

     $ export SASS_LIBSASS_PATH=~/libsass
     $ export SASS_SASSC_PATH=~/sassc
     $ export SASS_SPEC_PATH=~/sass-spec

  2. Ensure the newly build executable is added to your PATH.

Step 2: Verify LibSass / SassC Installation

Enter the following into your terminal. If your output matches, you're good to go!

$ sassc -v
sassc: 3.3.6-30-g5472
libsass: 3.4.0-RC1
sass2scss: 1.1.0
sass: 3.4

If your version for SassC and LibSass is reported as [NA], do not fear! SassC depends on Git for grabbing its version information. Sometimes, despite your best efforts, it can't find Git even when its on the path. To test your installation, create a new file called "test.scss" that contains the following code (don't worry if it doesn't make sense to you yet):

// test.scss

$color-name: magenta;

.some-class {
     color: $color-name;
}

Now, in the same directory as the file you created, enter the following into your terminal (this assumes that sassc is on your system path!):

$ sassc test.scss > test.css

You should now see a newly created file in the same directory called "test.css" and it should contain the following content:

// test.css

.some-class {
     color: magenta;
}

If that's what you see, then you're good to go! If not, check out Part 5 of the tutorial for some docs or consider re-doing the installation process, ensuring you haven't skipped any steps.

Background Information

The last thing you're going to need for this how-to guide (If you don't have it already) is Node.js, a web server written in JavaScript. We'll be using Node to demonstrate how LibSass opens up the doors for Sass usage outside of a Ruby or Ruby on Rails context. We won't be building anything too crazy here but will cover enough to ensure you get the gist of things.

Step 1: Install Node.js

• Windows / Mac Install Instructions:
  1. Thankfully, there is an easy to use installer provided for both operating systems at nodejs.org. Head over there, download download it, and then run the installer.
  2. Windows users only: Ensure that node is on your system PATH.
• Linux Install Instructions:
  1. Since node is a very popular program, you should be able to easily install using your system's package manager. If you are on Ubuntu, you'll do something like this:

     $ sudo apt-get install node
     # ... a bunch will print out here, just enter 'y' at the prompt to continue
     Do you wish to continue? [Y/n] y
     # More stuff will print here, before returning to the prompt.
     $

  2. If you instlled using a package manager, node shold be on your PATH already. If not, make sure it is!

Step 2: Verify Node and NPM were installed correctly

If you followed the above instrutions, Node and NPM (the Node Package Manager) should both be installed on your system. Execute the following at the terminal to verify:

node --version
v0.12.2
npm --version
2.6.4

If you get something similar to that, you're good to go!

If you've made it this far, congratulations! Getting software up and running the first time is a challenging task. If you completed all of the steps from above, you shold be able to run the following commands in your terminal and get a proper version number for each installed program:

$ ruby --version
$ gem --version
$ sass --vesion
$ sassc -v
$ node --version
$ npm --version

If any of the above commands gives you an issue (am I repeating myself here?), check Part 5 for the docs.
Now on to the real fun, learning Sass!