Dart SASS vs Node SASS - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import Dart Sass in a Node.js project.

SASS

const sass = require('[1]');

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

Asass

Bdart-sass

Csass-node

Dnode-sass

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'node-sass' which is deprecated.

Trying to import 'dart-sass' directly which is not a package name.

The modern and recommended package for Sass is sass, which is Dart Sass compiled to JavaScript. It replaces node-sass.

2fill in blank

medium

Complete the command to install Dart Sass using npm.

SASS

npm install [1] --save-dev

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

Asass-node

Bnode-sass

Csass

Ddart-sass

Attempts:

3 left

💡 Hint

Common Mistakes

Installing 'node-sass' which is deprecated.

Trying to install 'dart-sass' which is not a valid npm package.

To install Dart Sass, use the sass package. It is the official and actively maintained Sass compiler.

3fill in blank

hard

Fix the error in this Sass compile command to use Dart Sass CLI.

SASS

npx [1] input.scss output.css

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

Adart-sass

Bsass

Cnode-sass

Dsass-node

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'node-sass' command which is deprecated.

Trying to use 'dart-sass' as a CLI command which does not exist.

The Dart Sass CLI is invoked using the sass command, not node-sass.

4fill in blank

hard

Fill both blanks to write a Sass compile script in package.json using Dart Sass.

SASS

"scripts": { "build-css": "[1] src/styles.scss [2] dist/styles.css" }

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

Asass

Bnode-sass

C--no-source-map

D--source-map

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'node-sass' command which is deprecated.

Using '--source-map' when source maps are not wanted.

The script uses the Dart Sass CLI command sass and disables source maps with --no-source-map.

5fill in blank

hard

Fill all three blanks to create a Dart Sass compile script with watch mode and compressed output.

SASS

"scripts": { "watch-css": "[1] src/styles.scss [2] dist/styles.css [3]" }

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

Asass

B--watch

C--style=compressed

D--no-source-map

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'node-sass' instead of 'sass'.

Omitting the watch flag.

Using incorrect style options.

The script uses the Dart Sass CLI sass command with --watch to auto-compile on changes and --style=compressed for minified CSS output.