Book Image

Instant SASS CSS How-to

By : Alex Libby
1 (1)
Book Image

Instant SASS CSS How-to

1 (1)
By: Alex Libby

Overview of this book

CSS styling has been a key part of developing for the Internet since the early 1990s, but unlike JavaScript, has suffered from the inability to produce dynamic styles, using functions, operators, and variables. SASS uses the power of Ruby to bring support for all three and more to your CSS, allowing you to engage in a more efficient, modular style of working, and making it easier to maintain your CSS styling in your projects.Instant SASS CSS How-to is a practical, hands-on guide that provides you with a number of clear step-by-step exercises, which will help you take advantage of the power of SASS, and give you a good grounding in writing and compiling CSS style sheets using the SASS pre-processor language.This book looks at how you can incorporate SASS into your web pages, and either produce style sheets dynamically, or pre-compile them before including the final article into your site's pages.You will also learn how you can use the power of mixins, functions, and variables to help produce style sheets, and reduce the amount of code you need to write in your style sheets. We will also take a look at how you can incorporate a more modular style to your development workflow, which will help with making style sheets more manageable and easier to update in the future. We will also take a look at how you can build up libraries of reusable code that you can incorporate into your future projects.You will learn everything you need to know to start using SASS to help produce more efficient style sheets in your site's pages, and adopt a more modular development workflow, which will make it easier to maintain your sites in the future.
Table of Contents (7 chapters)

Viewing SASS in a browser (Become an expert)

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

How to do it...

  1. Let's get FireSASS installed. To do this, you need to browse to, 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 from the start of this book, and save it as example2.html, within the c:\sass folder we created earlier:

    <form action="">
        Name: <input type="text" class="input" />
        Password: <input type="password" class="input" />
        <input type="submit" value="This is a button" id="submitfrm" />
  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:\sass\example2.scss:c:\sass\example2.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.

Let's move on now, and focus on the library itself. Over the next few exercises, we will look at various elements of the library, beginning with using nested rules.