What is SASS? SASS stands for Syntactically Awesome Stylesheets and is a CSS Preprocessor (a language that translates into CSS).

What do I need to run SASS?

  1. First thing we need is ruby. If you do not have ruby then click here!
  2. Second, we need to install the HAML and SASS Ruby Gems

Getting Ruby

Getting ruby is very easy to do! It's a very simple process for most operating systems.

Windows

For Windows Operating Systems we can visit http://rubyinstaller.org/downloads/. This is by far the easiest way to install ruby on Windows OS.

Linux

First matter of business with Linux systems is to see if ruby is already installed. The easiest way to do this is to open terminal and run the command $ ruby -v. If a ruby version number comes out then you already have ruby installed and should skip to installing SASS.
Ubuntu and Debian
For ubuntu and debian users (or those who use the aptitude package manager) we can simply run a terminal command:

$ sudo apt-get install ruby1.9.1

Arch Linux
On Arch Linux systems we can run the following command:

$ sudo pacman -S ruby

CentOS, Fedora, and RedHat
For those who use CentOS, Fedora, and RedHat you may search the official repository list by running the following command:

$ yum search ruby

If there is no official repository listing we can compile the software from the source via the following commands:

$ sudo yum groupinstall 'Development Tools'
$ sudo yum install readline-devel
$ cd /usr/local/src
$ wget http://ftp.ruby-lang.org/pub/ruby/1.9/ruby-1.9.3-p286.tar.gz
$ tar xzvf ruby-1.9.3-p286.tar.gz
$ cd ruby-1.9.3-p286
$ ./configure && make
$ sudo make install

On all linux systems we can ensure ruby has been installed by opening terminal and typing $ ruby -v. If this succeeds then we're ready to install the SASS gem!

Mac OS X
Most OS X installations comes with Ruby pre installed on your machine. To ensure installation, run the following terminal command $ ruby -v. If a ruby version is the result then we're good to install SASS!
If Ruby is NOT installed then see the OS X section of the Ruby download page.

Installing HAML & SASS

Assuming Ruby has been successfully installed on your system we are now ready to install SASS!
Note: if you are using a Ruby version that is under 1.9.x then you may NOT have gems installed. To install Gems see here http://docs.rubygems.org/read/chapter/3.

Windows

To install the SASS Gem on Windows OS we need to start Command Prompt with Ruby so we can begin installing HAML and SASS.
Step 1
Open Command Prompt with Ruby

Step 2
Next we want to ensure ruby gems is installed on our system. We can accomplish this by issuing the gem -v command within our ruby command prompt. See the image for additional details:

Step 3
Then we need to actually install the gems we need to use. SASS is our required gem; however, we can optionally install an alternative markup extension called HAML. Enter the following text in the command line to install both HAML and SASS:

C:\users\username\> gem install haml sass

Step 4
Finally, we need to test our SASS installation to ensure it's working correctly! Navigate to your desktop and create a directory called sass_test. Create a new file in there called style.scss and open it in your favorite text editor. Optionally, you can download this file here and use this as an example: SASS Test (613).

Add the following code to your document:

$link_color: #ff9300;
$link_color_hover: darken($link_color, 25%);

a,
a:link,
a:visited {
        color: $link_color;
        text-decoration: underline;
}
a:hover,
a:active {
        color: $link_color_darken;
        text-decoration: none;
}

Save your file and return to your ruby prompt. Enter the following command:

$ sass --update style.scss:style.css

.

Check your sass_test directory and you will now see there is a CSS file! To see the demo we used, please download this file: SASS Test (524)

To recap, SASSS is a excellent way to write CSS and give your style sheets dynamic capabilities.

Be Sociable, Share!