Source maps for debugging in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a source map in the context of Sass debugging?

A source map is a file that links the compiled CSS back to the original Sass files. It helps browsers show the exact Sass line when inspecting styles, making debugging easier.

beginner

How do you enable source maps when compiling Sass?

You enable source maps by adding the --source-map flag when running the Sass compiler, like sass --source-map input.scss output.css.

beginner

Why are source maps helpful during web development?

Source maps let you see and edit the original Sass code in browser developer tools instead of the compiled CSS. This saves time and reduces confusion when fixing styles.

beginner

What happens if you don’t use source maps with Sass?

Without source maps, browser tools only show the compiled CSS lines. This makes it hard to find where styles come from in your Sass files, slowing down debugging.

intermediate

Can source maps affect website performance?

Source maps do not affect how the website looks or runs for users. They are only used by developer tools and can be disabled in production to keep files smaller.

What command enables source maps when compiling Sass?

A sass --source-map input.scss output.css

B sass --no-source-map input.scss output.css

C sass --map-source input.scss output.css

D sass --debug input.scss output.css

The --source-map flag tells Sass to generate source maps linking CSS to Sass.

What does a source map file do?

A Compiles Sass into CSS

B Minifies CSS for faster loading

C Links compiled CSS back to original Sass files

D Removes unused CSS styles

Source maps connect the CSS you see in the browser to the original Sass code for easier debugging.

If you don’t use source maps, what will browser developer tools show?

A Both Sass and CSS files

B Only the compiled CSS lines

C The original Sass files

D No styles at all

Without source maps, browsers only show the compiled CSS, making it harder to find the original Sass source.

Are source maps visible to website visitors?

A No, they are only used by developer tools

B Yes, they change the website appearance

C Yes, they slow down the website

D No, they delete CSS files

Source maps are for developers only and do not affect the website’s look or speed for visitors.

When should you disable source maps?

A Only when using JavaScript

B During development for easier debugging

C Never, they are always required

D In production to reduce file size

Disabling source maps in production keeps files smaller and avoids exposing source code.

Explain what source maps are and why they are useful when working with Sass.

Think about how you find the original Sass code when inspecting styles.

Describe the steps to enable source maps when compiling Sass and how to check if they work.

Consider the command line and browser inspection.