About

A preprocessor takes an arbitrary source file and converts it into something that the browser understands.

Preprocessors implements features that browser doesn't support natively such as:

  • variables
  • CSS selectors nesting
  • module (template)
  • import without http request. See CSS - @import rule
  • vendor prefix grouping
  • Inheritance of properties (Same property for a message but different color for waning, info)
  • Mathematics Operators

In-browser preprocessor editing can be done with the following browser features:

  • sourcemaps
  • local file editing (workspaces)
  • automatic reloading

Example

Source Map

CSS - Source Map

Documentation / Reference