About

For each CSS file it produces, a CSS preprocessor generates:

• a source map file (.map)
• and the compiled CSS.

The source map file is a JSON file that defines a mapping between:

• each (compiled|generated) CSS declaration
• and the corresponding line of the source file.

It allow then to map the (compiled|generated) CSS back to the original pre-processor source file.

Articles Related

Syntax

Each CSS file contains an annotation that specifies the (URL|location) of its source map file, embedded in a special comment on the last line of the file:

/*# sourceMappingURL=<url> */

Example

For instance, Sass generates:

• from the following Sass source file (styles.scss)

$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;
h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

• a CSS file (styles.css) that contains the sourceMappingURL annotation

h2 {
  font-size: 26px;
  color: red;
  background-color: whitesmoke;
}
/*# sourceMappingURL=styles.css.map */

• and the source map file (styles.css.map)

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK"
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

where the mappings values are encoded in VLQ (Variable Length Quantity)