Here be dragons! You cannot write pure CSS and follow this manual’s advice.

CSS processors are essential tools for writing extensible and maintainable CSS. They enhance the language with powerful features:

• Imports
• Variables
• Mixins
• Extends
• Functions
• Nesting
• Conditionals
• Operators

And help us compile into valid, optimized CSS.

Tools

Pre-processors and post-processors are effectively the same thing. Don’t worry about it.

• LESS
• Post CSS
• Sass (SCSS)
• Stylus

Preferred tools

GravDept uses Gulp to process SCSS into CSS with sourcemaps then Autoprefixer adds vendor prefixes.

Why these tools?

Gulp

• Easy to understand.
• Fast compilation (under 500ms).
• Most Node modules have Gulp wrappers.

Sass (SCSS)

• Built on CSS syntax (all CSS is valid SCSS).
• Concise and beautiful language extensions (good looking code matters).
• Widespread adoption + stability.

Sourcemaps

• Creates .map files to trace processed CSS back to imported partials.

Autoprefixer

• Easy and readable (just write standard CSS).
• Easy to maintain via browserlist config.

Why not all PostCSS?

PostCSS is flexible, fast, and totally extensible. Assembling and maintaining everything from scratch isn’t always an advantage.

Sass is stable, robust, fast, and has consistent documentation. It already does almost everything a CSS processor should, and has broad adoption. No need to reinvent the wheel.

Resources

• Stefan Baumgartner — Deconfusing Pre- and Post-processing