Source maps for debugging in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable source maps in Sass compilation.

SASS

sass --watch input.scss:output.css --[1]

Drag options to blanks, or click blank then click option'

Asource-map

Bcompress

Cstyle

Dquiet

Attempts:

3 left

💡 Hint

Common Mistakes

Using --compress disables source maps.

Using --style only changes output style, not source maps.

Using --source-map tells Sass to generate source maps for easier debugging.

2fill in blank

medium

Complete the Sass configuration to include source maps in a build script.

SASS

sass --no-[1] input.scss output.css

Drag options to blanks, or click blank then click option'

Aupdate

Bstyle

Cwatch

Dsource-map

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing --no-watch with source maps.

Using --no-style disables output style, not source maps.

The --no-source-map flag disables source maps, so removing no- enables them.

3fill in blank

hard

Fix the error in the Sass command to generate source maps correctly.

SASS

sass input.scss output.css --[1]=true

Drag options to blanks, or click blank then click option'

Asource-map

BsourceMap

Csourcemap

Dmap-source

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase like --sourceMap causes errors.

Misspelling the flag disables source maps.

The correct flag is --source-map with a dash, not camelCase or other variations.

4fill in blank

hard

Fill both blanks to create a Sass command that watches files and generates source maps.

SASS

sass --[1] input.scss:output.css --[2]

Drag options to blanks, or click blank then click option'

Awatch

Bsource-map

Ccompress

Dstyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using --compress instead of --source-map disables source maps.

Forgetting to use --watch means no automatic updates.

--watch watches files for changes, and --source-map generates source maps for debugging.

5fill in blank

hard

Fill all three blanks to write a Sass command that watches, outputs compressed CSS, and generates source maps.

SASS

sass --[1] input.scss:output.css --[2]=[3]

Drag options to blanks, or click blank then click option'

Awatch

Bstyle

Ccompressed

Dsource-map

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign a value to --source-map causes errors.

Mixing up the order of flags.

--watch watches files, --style=compressed compresses CSS output, and --source-map generates source maps.

Note: The --source-map flag does not take a value, so it is not included here.