Chapter 1. Harness the Power of Sass for Responsive Web Design

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

Tip

Downloading the example code

You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. 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.

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

• How does Sass work?
• The basic concepts of Sass to consider for Responsive Web Design (RWD)