0
0
SASSmarkup~5 mins

Source maps for debugging in SASS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Source maps help you find where your CSS styles come from in your original Sass files. This makes fixing mistakes easier.

You want to see which Sass file and line a style comes from when inspecting in the browser.
You are working on a big project with many Sass files and want easier debugging.
You want to quickly fix style errors without guessing where the code is.
You want to share your code with others and help them debug faster.
You want to keep your CSS clean but still know the source of each style.
Syntax
SASS
sass --source-map input.scss output.css
This command tells Sass to create a CSS file and a source map file.
The source map links the CSS back to the original Sass code.
Examples
Compile styles.scss to styles.css with a source map for debugging.
SASS
sass --source-map styles.scss styles.css
Compile without creating a source map. Use this when you don't need debugging help.
SASS
sass --no-source-map styles.scss styles.css
Watch the Sass file for changes and update CSS and source map automatically.
SASS
sass --watch --source-map styles.scss:styles.css
Sample Program

This simple HTML page links to a CSS file generated from Sass with source maps enabled. When you open browser DevTools and inspect the h1, you can see the original Sass file and line number where the style is defined.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Source Map Demo</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Hello, Sass Source Maps!</h1>
</body>
</html>
OutputSuccess
Important Notes

Make sure your browser DevTools has source maps enabled (usually on by default).

Source maps do not affect how your site looks; they only help with debugging.

Keep source maps out of production if you want to hide your source code.

Summary

Source maps connect compiled CSS back to Sass source files for easier debugging.

Use the --source-map flag when compiling Sass to generate source maps.

Check browser DevTools to see original Sass code when inspecting styles.