CSS in Depth

Appendix B. Preprocessors

Using a preprocessor is 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 re-use it throughout your stylesheet.

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 this

$brand-blue: #0086b3;

a:link {
  color: $brand-blue;
}

.page-heading {
  font-size: 1.6rem;
  color: $brand-blue;
}

This code snippet defines a variable named $brand-blue ...