appendix B Preprocessors
Using a preprocessor has long been a vital part of a modern CSS workflow. A preprocessor provides a number of conveniences to streamline your writing and to help you maintain your codebase. For instance, you can write a piece of code once and then reuse it throughout your stylesheet.
Many CSS features, such as variables and nesting, first began in preprocessors, before they existed in the language itself. In many ways, preprocessors acted as a proving ground, where developers proved the utility of these features, and the W3C eventually added some of these features to the language itself. Because many of the features now live in CSS, preprocessors are less necessary than they have been in the past. They are still very popular, however, and it is worth considering whether you want to use one in your projects.
A preprocessor works by taking a source file, which you write, and translating it into an output file, which is a regular CSS stylesheet. In most cases, the source file looks much like regular CSS but with extra features added. A simple example using a preprocessor variable looks like the following:
$brand-blue: #0086b3;
a:link {
color: $brand-blue;
}
.page-heading {
font-size: 1.6rem;
color: $brand-blue;
}