So far in this book, we’ve been writing all our styles using plain CSS. We can also use preprocessors, however. Each processor has its own syntax, and most preprocessors extend the existing CSS functionality. The most commonly used are
- Sass (https://sass-lang.com)
- Less (https://lesscss.org)
- Stylus (https://stylus-lang.com)
They were created to facilitate writing code that’s easier to read and maintain as well as to add functionality that’s not available in CSS. Styles written for use with preprocessors have their own syntax and must be built or compiled into CSS. Although some preprocessors provide browser-side compilation, the most common implementation is to preprocess the styles and serve the output CSS to the browser (http://mng.bz/Wzex).
The benefit of using a preprocessor is the added functionality it provides, examples of which we cover in this chapter. The drawback is that now we need a build step for our code. The choice of preprocessor is based on what functionality is needed for the project, the team’s knowledge, and (if the project uses a framework) which frameworks are supported. For our project, we’re going to choose based on popularity. When developers were surveyed about their sentiments regarding CSS preprocessors, the majority favored Sass (figure 12.1), so that’s what we’re going to use.
Figure 12.1 Preprocessor sentiment (data source http://mng.bz/8ry2)
