Source maps for debugging in SASS - Mini Project: Build & Apply

Source Maps for Debugging in Sass

📖 Scenario: You are working on a website's styles using Sass. To make debugging easier, you want to create source maps. Source maps help you see the original Sass code in the browser's developer tools instead of the compiled CSS.

🎯 Goal: Create a Sass file with some styles, configure Sass to generate source maps, compile the Sass to CSS with source maps enabled, and link the source map in the CSS file.

📋 What You'll Learn

Create a Sass file named styles.scss with some basic styles.

Add a configuration variable to enable source maps during compilation.

Compile the Sass file to CSS with source maps enabled.

Ensure the compiled CSS file links to the source map for debugging.

💡 Why This Matters

🌍 Real World

Source maps are used by web developers to debug styles easily in browsers by seeing the original Sass code instead of compiled CSS.

💼 Career

Knowing how to generate and use source maps is important for front-end developers to efficiently fix style issues and maintain code.

1

Create the Sass file with basic styles

Create a file named styles.scss and write these styles exactly: a body selector with background-color: #f0f0f0; and a p selector with color: #333;.

SASS

# Your code here

Need a hint?

Write the selectors body and p with the exact properties and values given.

2

Add configuration to enable source maps

Create a configuration variable named enableSourceMap and set it to true to indicate source maps should be generated.

SASS

body {
  background-color: #f0f0f0;
}

p {
  color: #333;
}

// Your code here

Need a hint?

Use a Sass variable named $enableSourceMap and assign it the value true.

3

Compile Sass to CSS with source maps enabled

Use the Sass command line to compile styles.scss to styles.css with source maps enabled by adding the --source-map flag.

SASS

body {
  background-color: #f0f0f0;
}

p {
  color: #333;
}

$enableSourceMap: true;

// Your code here

Need a hint?

Use the sass command with the --source-map option to generate source maps.

4

Link the source map in the compiled CSS

Ensure the compiled styles.css file includes a comment at the end linking to styles.css.map like /*# sourceMappingURL=styles.css.map */.

SASS

body {
  background-color: #f0f0f0;
}

p {
  color: #333;
}

$enableSourceMap: true;

// Run this command in terminal:
// sass styles.scss styles.css --source-map

/* Your code here */

Need a hint?

Look at the end of the compiled CSS file and add the source map comment linking to styles.css.map.