Example

For example, consider this SCSS syntax of Sass:

scss

ul {
  list-style: none;
  li {
    display: inline;
  }
}

During the build process, the SCSS is transformed into CSS. A source map file index.css.map is generated and linked to from the CSS in a comment at the end:

css

ul {
  list-style: none;
}
ul li {
  display: inline;
}
/*# sourceMappingURL=index.css.map */

This map file contains not only mappings between the original SCSS and the generated CSS but also the original SCSS source code in encoded form. It's ignored by the browser's CSS parser but used by browser's DevTools:

json

{
  "version": 3,
  "sourceRoot": "",
  "sources": ["index.scss"],
  "names": [],
  "mappings": "AAAA;EACC;;AACA;EACC",
  "file": "index.css"
}

The source map allows the browser's DevTools to link to specific lines in the original SCSS file and display the source code:

Firefox DevTools focused on the li element in the DOM inspector. The style panel shows transformed CSS without nesting and a link to the third line of the index.scss file.

Firefox DevTools with the index.scss file opened in the style editor. The editor is focused on the source code's third line in SCSS format with nesting.

Help improve MDN

Yes No

Learn how to contribute

This page was last modified on Dec 15, 2025 by MDN contributors.

Example

See also

Help improve MDN