web:css:preprocessor

Table of Contents

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

Articles Related

Example

Sass,
Less
and Stylus.

Source Map

CSS - Source Map

Documentation / Reference

https://developers.google.com/web/tools/setup/setup-preprocessors?hl=en