Watch mode for auto-compilation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the command to start Sass in watch mode for the file style.scss.

SASS

sass [1] style.css --watch

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

Astyle.css

Bstyle.sass

Cstyle.scss

Dstyle.scss.css

Attempts:

3 left

💡 Hint

Common Mistakes

Using the output CSS file as the source file.

Forgetting the .scss extension.

Putting the --watch flag in the wrong place.

The command requires the source Sass file (style.scss) before the output CSS file and the --watch flag to auto-compile on changes.

2fill in blank

medium

Complete the command to watch the entire scss folder and compile to css folder.

SASS

sass --watch [1]:[2]

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

Ascss

Bcss

Cstyles

Dassets

Attempts:

3 left

💡 Hint

Common Mistakes

Reversing source and output folders.

Using folder names that don't exist.

Omitting the colon between folders.

The --watch flag watches the source folder (scss) and compiles all files into the target folder (css).

3fill in blank

hard

Fix the error in the command to watch style.sass and output style.css.

SASS

sass style.sass [1] style.css --watch

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

A--style

B--input

C--source-map

D--output

Attempts:

3 left

💡 Hint

Common Mistakes

Adding --output flag between files causes errors.

Misplacing the --watch flag.

Using wrong flags for input or output.

The --output flag is not needed here; the correct syntax is 'sass source.scss output.css --watch' without extra flags between files.

4fill in blank

hard

Fill both blanks to watch the sass folder and compile to the css folder with compressed output style.

SASS

sass --watch [1]:[2] --style [3]

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

Asass

Bcss

Ccompressed

Dexpanded

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up source and output folders.

Using expanded style instead of compressed.

Omitting the --style flag.

The command watches the sass folder, outputs to css folder, and uses the compressed style for smaller CSS files.

5fill in blank

hard

Fill all three blanks to watch the scss folder, compile to css folder, and generate source maps.

SASS

sass --watch [1]:[2] --source-map=[3]

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

Ascss

Bcss

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting source-map to false disables source maps.

Swapping source and output folders.

Omitting the colon between folders.

This command watches the scss folder, outputs CSS to css folder, and enables source maps for easier debugging.