7 min read

(For more resources related to this topic, see here.)

Downloading and installing SASS

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:

    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;
}

  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:sassexample1.scss:c:sassexample1.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 folderexample1.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.

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.

Viewing SASS in a browser

When you have compiled your SASS files into valid CSS, an important step is to then test to see that it works. If you start seeing unexpected results, you will want to troubleshoot the CSS code. The trouble is, most browsers don’t include support to trace back a SASS-compiled style to its original SASS code; we can fix that (at least for Firefox), by using FireSASS.

Getting ready

For this exercise, you will need a copy of Firefox, with Firebug installed. You can get the latter from http://www.getfirebug.com.

How to do it…

  1. Let’s get FireSASS installed. To do this, you need to browse to https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/, then click on the Add to Firefox button:

  2. Firefox will prompt you to allow it to install. Click on Allow, then on Install Now on the window that appears. You will need to restart Firefox for FireSASS to complete its installation.

  3. To test it, we need to create a SASS file with some example code, and use it within a HTML test page. Go ahead and add the following to a copy of the template, and save it as example2.html, within the c:sass folder we created earlier:

    <body>
<form action="">
Name: <input type="text" class="input" />
Password: <input type="password" class="input" />
<input type="submit" value="This is a button" id="submitfrm"
/>
</form>
</body>

  4. Add the following to a new SCSS file within Sublime Text 2. Save this as example2.scss; you will also need to link this into the <head> section of your code:

    $color-button: #d24444;
#submitfrm {
color: #fff;
background: $color-button;
border: 1px solid $color-button - #222;
padding: 5px 12px;
}

  5. Activate the SASS compiler from the command prompt, using the following command:

    sass --watch c:sassexample2.scss:c:sassexample2.css
--debug-info

  6. If all is well, you should see the following screenshot when you view the file in your browser:

How it works…

FireSASS works by replacing the line number of the CSS style in use, with that of the line number from the original SCSS file:

It relies on the –watch function being activated with –debug-info enabled. Using the previous example, we can see from the screenshot that the border color calculation of border: 1px solid $color-button – #222 returned a color of #B02222, which is a slightly darker shade of red than the main button itself. The beauty of this is that no matter whatever color you decide to use, the calculation will automatically return the right shade of color for the border.

Not convinced? Change the $color-button variable to something completely different. I’ve chosen #3bbfce. Now recompile the SASS file in Sublime Text 2 and the result is a nice shade of blue:

Okay, so we’ve only changed the color for one button in this example – it doesn’t matter if you make a change for one button or many; using this code means you only need to change one variable to update any button that uses the same variable in your code.

There’s more…

If you look into the folder where you are storing your SASS files, you may notice the presence of a .sass-cache folder, inside which there will be one or more .scssc files as shown in the following screenshot:

These are cache files, which live in the same folder as your source files by default. They are created by SASS when initially compiling SCSS files. This dramatically speeds up the compilation process, particularly when you have a large number of files to compile. It works even better if styles for a project have been separated into one of these files, which SASS can then compile into one large master file.

Summary

Thus in this article, we saw that the Role Tailored approach provides a single point of access into the system for each user through their assigned Role Center. The user’s Role Center acts as their home page. We saw how Role Center focuses on the tasks needed to support its users’ jobs throughout the day.

Resources for Article :

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here