Source maps for debugging in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main purpose of source maps in Sass debugging?

Source maps help developers by:

A Compressing CSS files to reduce file size

B Automatically fixing syntax errors in Sass files

C Linking the compiled CSS back to the original Sass files for easier debugging

D Converting Sass variables into JavaScript variables

💡 Hint

Think about how you find the original code when debugging compiled files.

Source maps connect the CSS you see in the browser back to the Sass source code, making it easier to find and fix issues.

📝 Syntax

intermediate

Which Sass command correctly generates a source map when compiling?

Choose the command that compiles Sass to CSS with source maps enabled.

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

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

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

D sass --generate-map input.scss output.css

💡 Hint

Look for the official flag that enables source maps.

The correct flag to generate source maps is --source-map. Other options are invalid or do not exist.

❓ rendering

advanced

What will happen in the browser DevTools if source maps are missing for Sass compiled CSS?

Select the correct behavior when inspecting styles in the browser without source maps.

A DevTools will show only the compiled CSS file and line number

B DevTools will automatically generate source maps on the fly

C DevTools will show the original Sass file and line number for styles

D DevTools will show an error message and not display styles

💡 Hint

Think about what the browser knows without extra mapping information.

Without source maps, DevTools can only show the compiled CSS file and line numbers, not the original Sass source.

❓ selector

advanced

Which CSS selector in DevTools corresponds to this Sass code with source maps enabled?

Given this Sass snippet:

$color: blue;
.button {
  color: $color;
}

What selector will DevTools highlight when inspecting the button style?

A .btn

B #button

C button

D .button

💡 Hint

Look at the class name used in the Sass code.

The Sass code defines styles for the class .button, so DevTools will highlight .button selector.

❓ accessibility

expert

How do source maps improve accessibility during Sass debugging?

Choose the best explanation of how source maps help developers ensure accessible styles.

A They allow developers to quickly find and fix style issues affecting keyboard navigation and screen readers by linking CSS to Sass source

B They automatically add ARIA attributes to HTML elements

C They convert Sass variables into accessible color codes

D They disable styles that reduce accessibility

💡 Hint

Think about how debugging original code helps fix accessibility problems.

Source maps let developers trace styles back to Sass source, making it easier to fix issues that impact accessibility like focus styles or color contrast.