Downloading and installing SASS (Must know)

We're going to kick off the recipes by downloading and setting up SASS ready for use – this will get your system ready to compile SASS files as you create them.

Getting ready

For this recipe you will need a few things – you will need your choice of normal text editor; I normally use TextPad, which is available on a commercial license at http://www.textpad.com, although please feel free to use whichever editor you prefer. You will also need a copy of RubyInstaller for Windows, which you can download from http://www.rubyinstaller.org/downloads; at the time of writing, the latest version is 1.9.3. If you are a Mac OS X user, you will already have Ruby installed as part of the operating system; Linux users can download and install it through their distribution's package manager.

How to do it...

1. Let's begin by running rubyinstaller-1.9.3-p286.exe, and clicking on Run when prompted. At the Select Setup Language window prompt, select your preferred language – the default is English. At the License Agreement window, select I accept the license then click on Next.

2. At the Installation Destination and Optional Tasks window, select Add Ruby executables to your PATH, and Associate .rb and .rbw files with this Ruby installation:

   

3. Click on Install. Ruby will now install, you will see a progress window displayed on the screen while the software is being installed. A dialog window will appear when this is completed. Click on Finish to close the window.

4. The next stage is to install SASS. For this, you need to bring up a command prompt, then type gem install sass and press Enter. Ruby will now go ahead and install SASS – you will see an update similar to the following screenshot:

   

   Note

   You may find this takes a short while, with little apparent change on screen; there is no need to worry, as it will still be downloading and installing SASS.

5. Now that SASS is installed, we can go ahead and start creating SASS files. Open up your text editor, add the following lines, and save it as example1.scss in a folder called c:\sass:

   $blue: #3bbfce;
   $margin: 16px;
   
   .content-navigation { 
     border-color: $blue;
     color: darken($blue, 9%);
   }
   
   .border {
     padding: $margin / 2;
     margin: $margin / 2;
     border-color: $blue;
   }

   Tip

   Downloading the example code

   You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

6. We now need to activate the compiler. If you don't already have a session open, bring up a command prompt, and enter the following:

   sass --watch c:\sass\example1.scss:c:\sass\example1.css
   

   If you get a "permission denied" error when running sass --watch, then make sure you are running the command prompt as an administrator.

7. This activates the SASS compiler which will then automatically generate a CSS file when any change is made to the SCSS file:

   

8. As soon as you save the file, the SASS compiler will pick up the change, and update the appropriate CSS file accordingly:

   

9. If you look in the c:\sass folder\example1.css file that has been generated, you will see the resulting CSS, which you can then attach to your project:

   .content-navigation { border-color: #3bbfce; color: #2ca2af; }
   .border { padding: 8px; margin: 8px; border-color: #3bbfce; }

How it works...

In this recipe, we've installed Ruby and SASS, and looked at how to run the SASS --watch command to set the SASS compiler to automatically compile CSS files when you create SCSS files. In this instance, we created a basic SCSS file, which SASS has parsed; it works out where variable "placeholders" have been used, and replaces them with the appropriate value that has been specified at the start of the file. Any variables included in the SASS file that are not subsequently used, are automatically dropped by SASS.

Note

When using Ruby 1.9, SASS is able to automatically determine which character encoding it should use, and will handle this in the same way as CSS (which is UTF-8 by default or a more local encoding for some users). You can change this if needed; simply add @charset "ENCODING-NAME"; at the beginning of the stylesheet, where ENCODING-NAME is the name of a format that can be converted to Unicode.

While the creation of CSS files using this method is simple, it is a manual process that has to be run outside of your text editor. In the next recipe, we'll take a look at how you can add support so you can compile code from within your text editor, using Sublime Text 2 as your example editor.