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

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