Before we dive into mastering responsive web design, we need to be on the same page as far as technologies go, in our case, CSS preprocessors and, specifically, Sass.

In this book, all CSS is going to be written in Sass in SCSS format. The way we write CSS has changed; it has improved tremendously.

CSS preprocessors such as Sass, LESS, and Stylus give the web/mobile designers and developers new superpowers. Yes, I used the word superpowers because that's exactly how I felt only a few hours after using Sass for the first time, and what I used was as basic as it gets:

.navigation-bar {
    display: flex;
    li {
        padding: 5px 10px;
    }
}

See the nested li selector? Yeah, that's Sass in action. When the preceding code is compiled, this is what it looks like:

.navigation-bar {
   display: flex; 
}
.navigation-bar li {
   padding: 5px 10px;
}

Let's see what's in store for us in this chapter:

How does Sass work?

Knowing how Sass works is a matter of understanding several basic technological concepts:

1. Sass can be based on two different technologies: Ruby or LibSass. In this book, we're going to use Sass based on Ruby.
2. Sass is a Ruby gem. Gems are packages for use in Ruby. A Ruby gem is a software that runs only on Ruby. Ruby is a programming language, just like PHP, .NET, Java, and so on.
3. We can make Sass run via the command line, but we can also run Sass with a third-party application, making the use of the command line unnecessary.
4. Sass is a programming/scripting language used to create CSS.
5. CSS is a very repetitive language. Sass allows authors to optimize those repetitive tasks and create CSS faster and more efficiently.
6. Part of the Sass workflow is when Sass is watching an SCSS file, for example, book-styles.scss. When it detects a change in that SCSS file, it then compiles it into a CSS file book-styles.css.

Tip

Watching an SCSS file means that the Sass watcher is running in the background looking over the SCSS file(s) for any changes.

Installing Sass

Here are the steps we're going to follow:

1. Download the Ruby installer
2. Open the command line
3. Install the Sass gem

Downloading the Ruby installer

Windows: Download the Ruby installer from the following link:

http://rubyinstaller.org/downloads/

Mac: Ruby comes preinstalled on all Macs, so there's no need to download anything.

Opening the command line

Windows and Mac: Open the command line.

Tip

Windows Tip!

Press Windows + R, type CMD, and then press Enter.

Installing the Sass gem

Type the following command into the command prompt (it doesn't matter which folder you're in):

Windows, use the following command:

gem install sass

Mac, use the following command:

sudo gem install sass

It'll take a few seconds to install Sass.

Tip

At the time of writing, the latest version of Sass was 3.4.14. The version/revisions might be different by the time the book comes out.

That's it! Sass is now installed on your machine.

Using Sass

What I'm about to show you is completely different to what any other Sass tutorial out there tells you to do. Most of those tutorials complicate things too much. This is the simplest way to use Sass you'll ever read.

The following screenshots are on Windows, but the process can be applied exactly the same regardless of platform.

In the following steps, you will see examples of how the necessary folders and files look after being created, not how to create them:

1. Create a /Demo folder anywhere on your drive:
   
2. Inside that folder, create two subfolders, /css and /scss:
   
3. Create a .scss file. Go into the /scss folder and create a file called styles.scss:
   

   Tip

   Notice the file extension .scss? This is your Sass file. Yes, right now there's nothing in it, it's empty.

4. Go back to the command line for a minute and follow these steps:
   1. In the command line, type cd <space>
   2. A space after cd means Change Directory. From your file manager, drag and drop the /Demo folder into the command prompt/terminal window and press Enter.
      
   3. You should be in the /Demo folder now.
   
5. Make Sass watch your /scss and /css folders by typing this in the command line:

   sass --watch scss:css­
   

6. Make Sass watch the /scss and /css folders.
   

   That's it! You are now using Sass!

   Tip

   The --watch flag tells Sass to pay attention to the /scss and /css folders so that when we make a change to a .scss file (in our case, styles.scss), Sass will detect the change and compile the SCSS into the final CSS file we're going to use in our website or app.

7. Edit the .scss file and watch Sass compile it into a .css file:
   1. Open your text editor (I use Sublime Text).
   2. Open the styles.scss file.
   3. Add some CSS to it.
   4. Save the styles.scss file.
   5. From your command line/terminal, verify that the compiling was successful.
   6. Open your styles.css file and enjoy your new creation.