What is a CSS Source Map?

Source: https://www.sitepoint.com/using-source-maps-debug-sass-chrome/

A source map is a .map file in JSON format that gets generated when your Sass files are compiled into CSS. It contains information that links each line of your CSS file (the output) to the corresponding line in its SCSS source file (the input).

This means when your CSS is compiled, you’ll see a comment like the following at the end of your compiled CSS file:

/*# sourceMappingURL=style.css.map */

Below is the content of a truncated .map file.

{
"version": 3,
"mappings": ";AAiIA,qDAAsD;EACpD,OAAO,EAAE,GAAG"
"sources": ["../scss/foundation/components/_breadcrumbs.scss","../scss/foundation/components/_icon-bar.scss","../scss/foundation/components/_offcanvas.scss","../scss/foundation/components/_visibility.scss","../scss/foundation/components/_global.scss","../scss/foundation/pages/_index.scss"],
"names": [],
"file": "foundation.css"
}

How Do Source Maps Help?

When debugging a web page using Chrome’s developer tools using source maps, the styles panel will show which Sass partial your CSS came from instead of pointing to the CSS file. Meaning, instead of showing the source as style.css, it will show it as _buttons.scss.

In the example in the screenshot below, the styles for the body element come from a partial called _body.scss.

When inspecting, I would like to know where I have defined the color: black portion in this.

To get this information, I could perform one of the following actions to inspect further:

1. Press CTRL and click on the word color. It will open the appropriate partial in the sources tab and place the cursor in the exact line where the style is defined. In this case, the color is defined in a variable called $black.
2. Press CTRL and click on the word black. It will open _colors.scss in the sources tab, where the value for the variable $black is defined. In case the color black was coming from a mixin instead of a variable, CTRL + clicking on it will open the file where the mixin is defined. Click the image below to view an animated GIF that shows a demonstration of how this might look.

Using source maps with Workspaces allows you to edit and save changes from within Chrome’s developer tools. If sass --watch is running, it will detect the change and recompile the CSS. The browser will then automatically reload this new CSS.