Setting up SASS (npm, dart-sass) - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the command to install Dart Sass using npm.

SASS

npm install [1]

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

Agulp-sass

Bnode-sass

Csass

Dsass-loader

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'node-sass' which is deprecated.

Trying to install 'gulp-sass' which is a plugin, not the core compiler.

The official Dart Sass package is installed via npm using 'npm install sass'.

2fill in blank

medium

Complete the command to compile a SASS file named 'style.scss' into 'style.css'.

SASS

npx sass [1] style.css

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

Astyle.scss

Bstyle.css.scss

Cstyle.sass

Dstyle.css

Attempts:

3 left

💡 Hint

Common Mistakes

Using the output filename as input.

Confusing .sass and .scss extensions.

You compile the source file 'style.scss' into the output 'style.css'.

3fill in blank

hard

Fix the error in this command to watch changes in 'main.scss' and compile to 'main.css'.

SASS

npx sass --watch [1]:main.css

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

Amain.scss

Bmain.sass

Cmain.css

Dmain.css.scss

Attempts:

3 left

💡 Hint

Common Mistakes

Using the output file as source.

Using .sass extension instead of .scss.

The watch command needs the source file with .scss extension before the colon.

4fill in blank

hard

Fill both blanks to create a script in package.json to compile 'app.scss' to 'app.css' with watch mode.

SASS

"scripts": { "sass-watch": "sass --watch [1]:[2]" }

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

Aapp.scss

Bapp.css

Cstyle.css

Dstyle.scss

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping source and output filenames.

Using wrong file extensions.

The script watches 'app.scss' and outputs to 'app.css'.

5fill in blank

hard

Fill all three blanks to write a command that compiles all .scss files in 'src/sass' folder into 'dist/css' folder.

SASS

npx sass [3] [1]:[2]

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

Asrc/sass

Bdist/css

C--watch

Dsrc/scss

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong folder names.

Forgetting to add watch mode.

The command compiles all files from 'src/sass' to 'dist/css' and watches for changes.