SASS compilation to CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to compile a SASS file to CSS using the command line.

SASS

sass [1] styles.css

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

Astyle.css

Binput.scss

Coutput.css

Dmain.sass

Attempts:

3 left

💡 Hint

Common Mistakes

Using the output file name as the input.

Confusing the order of input and output files.

The sass command compiles a SASS file (usually with .scss extension) to a CSS file. You specify the input file first, then the output file.

2fill in blank

medium

Complete the command to watch a SASS file and automatically compile on changes.

SASS

sass --watch [1]:styles.css

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

Amain.scss

Binput.scss

Coutput.css

Dstyles.css

Attempts:

3 left

💡 Hint

Common Mistakes

Using the CSS file as input.

Forgetting to use the colon between input and output.

The --watch flag tells SASS to watch the input file and compile it to the output file whenever it changes. The input file is the SASS source file.

3fill in blank

hard

Fix the error in the command to compile SASS with compressed output style.

SASS

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

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

Acompact

Bexpanded

Cnested

Dcompressed

Attempts:

3 left

💡 Hint

Common Mistakes

Using an invalid style name.

Leaving out the equal sign.

The --style=compressed option tells SASS to output CSS in a compressed format with no extra spaces or line breaks.

4fill in blank

hard

Fill both blanks to compile a SASS file into a CSS file in one command.

SASS

sass [1]:[2]

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

Asrc/styles.scss

Bdist/styles.css

Csrc/main.scss

Ddist/main.css

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping input and output files.

Using CSS file as input.

You can compile one SASS file to a CSS file by specifying the input and output separated by a colon.

5fill in blank

hard

Fill all three blanks to compile a SASS directory to a CSS directory with watch mode.

SASS

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

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

Asrc/sass

Bdist/css

Ccompressed

Dexpanded

Attempts:

3 left

💡 Hint

Common Mistakes

Using file names instead of folder names.

Using wrong style option.

This command watches the src/sass folder and compiles all SASS files inside it to CSS files in dist/css folder using compressed style.