Configuring Sass in Angular

Angular-CLI supports all the major CSS preprocessors, including Sass, Less, and Stylus. Although each of these options has its own unique features and language syntax, Sass is, by far, the most popular CSS preprocessor used for web applications. For that reason it is what we will focus on in this book.

Sass works as as superset to CSS in a similar way that TypeScript acts as a superset of JavaScript in Angular. Our Sass styles will compile during our Angular-CLI build process, and output vanilla CSS for the browser. It will also allow us to use many useful features, such as defining variables, nesting for selectors for improved specificity, and better organizing our styles for reusable and composable styling.

Getting ready

There are two main flavors of Sass file extensions used in web applications today: .sass and .scss. While these formats have a different language syntax, they both have identical features and capabilities, so the choice largely comes down to the...