Skip to content

Help us create more tutorials! Make a donation using the Donate button or become a member using the button below to hide this banner and track your progress.

Source maps – Sass

Details

Sass generates an additional file when you compile your Sass code into CSS: a source map. The source map file name has a .css.map extension and matches the name of your CSS file. For example, if your CSS file is named main.css, then your source map file will be called main.css.map.

You will also see a comment in your CSS file that connects your CSS file to the source map. It will look something like this:

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

When you’re using your browser’s built-in debugging tools, the source map tells it what line in your Sass code is responsible for the styles on an element. This makes it easier to debug your Sass code if your styles aren’t turning out the way you want them to.

Without the source map, the browser can only tell you the line in the CSS output file that is responsible for an element’s style, which makes debugging your Sass code harder.

Exercises

There are no exercises for this lesson.

References

Source Maps | Sass

Back to: Sass Course