Web Development Recipes, 2nd Edition

Recipe 30

Building Modular Style Sheets with Sass

Problem

As web developers, we rely heavily on style sheets to create eye-catching interfaces, usable layouts, and readable typography. Style sheets are powerful but rudimentary. Even novice programmers tend to get frustrated that CSS doesn’t provide things like variables and functions to reduce duplication. They turn to JavaScript and jQuery to fill in the gaps, which ends up creating a horrid mix of behavior and presentation in the code.

Ingredients

• Node.js^[83] and npm

• Sass^[84]

Solution

The Syntactically Awesome Style Sheets (Sass) CSS extension tool extends CSS, giving it the features we’ve longed for, including variables and reusable code. We can use the Sass language to build style sheets that ...