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

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the primary purpose of Dart Sass in a web project?

Dart Sass is a popular implementation of Sass. What does it mainly do in a web development workflow?

A It automatically deploys Sass files to a live web server.

B It runs JavaScript code inside Sass files to add interactivity to web pages.

C It converts CSS files into Sass files for easier editing.

D It compiles Sass (.scss) files into standard CSS files that browsers can understand.

💡 Hint

Think about what browsers understand and what Sass files need to become.

Dart Sass takes Sass files, which have special syntax, and turns them into normal CSS files that browsers can read and apply styles from.

📝 Syntax

intermediate

Which npm command correctly installs Dart Sass as a development dependency?

You want to add Dart Sass to your project using npm so you can compile Sass files. Which command should you run?

A npm install dart-sass

B npm install sass --save-dev

C npm install sass --global

D npm install sass --save

💡 Hint

Think about the package name and how to add it only for development.

The official Dart Sass package on npm is named 'sass'. Using --save-dev adds it as a development dependency, which is best practice for build tools.

❓ rendering

advanced

What will be the output CSS after compiling this Sass code?

Given this Sass code, what CSS will Dart Sass produce?

SASS

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

A

.button {
  background-color: #3498db;
}
.button:hover {
  background-color: #2a80b9;
}

B

.button {
  background-color: $primary-color;
}
.button:hover {
  background-color: darken($primary-color, 10%);
}

C

.button {
  background-color: #3498db;
}
.button:hover {
  background-color: #3a9ce6;
}

D

.button {
  background-color: #3498db;
  &:hover {
    background-color: #2a80b9;
  }
}

💡 Hint

Remember Sass variables are replaced and functions like darken() calculate colors.

Dart Sass replaces variables with their values and evaluates functions like darken(). The hover selector is nested and compiled to .button:hover with the darkened color.

❓ selector

advanced

Which CSS selector is generated by this Sass nesting?

Given this Sass code, what is the correct CSS selector for the nested rule?

SASS

.nav {
  ul {
    margin: 0;
    li {
      list-style: none;
    }
  }
}

A .nav ul li { list-style: none; }

B .nav ul, li { list-style: none; }

C .nav ul li { margin: 0; }

D ul li { list-style: none; }

💡 Hint

Think about how nested selectors combine in Sass.

Sass nesting combines selectors by placing child selectors after parent selectors. So li inside ul inside .nav becomes .nav ul li.

❓ accessibility

expert

How can you ensure your compiled CSS supports high contrast mode for accessibility?

You want your Sass styles to adapt when users enable high contrast mode in their operating system. Which CSS media feature should you use in your Sass code?

A @media (contrast-mode: high) { /* styles here */ }

B @media (high-contrast: true) { /* styles here */ }

C @media (prefers-contrast: more) { /* styles here */ }

D @media (accessibility: high) { /* styles here */ }

💡 Hint

Look for the official CSS media feature for contrast preferences.

The standard CSS media feature to detect user preference for higher contrast is prefers-contrast with values like 'more' or 'less'.

Practice

1. What is the main purpose of using npm when setting up SASS with Dart SASS?

easy

A. To write SASS code directly in the terminal

B. To run a web server for SASS files

C. To convert CSS files into SASS files

D. To install the Dart SASS compiler package

Solution

1. Step 1: Understand npm's role in SASS setup

   npm is a package manager used to install tools like Dart SASS compiler.

2. Step 2: Identify what npm installs for SASS

   npm installs the Dart SASS compiler so you can compile SASS files to CSS.

3. Final Answer:

   To install the Dart SASS compiler package -> Option D

4. Quick Check:

   npm installs packages = B [OK]

Hint: npm installs tools like Dart SASS compiler [OK]

Common Mistakes:

• Thinking npm runs SASS code directly
• Confusing CSS to SASS conversion
• Assuming npm runs a web server

2. Which command correctly installs Dart SASS using npm?

easy

A. npm install -g sass

B. npm sass install

C. npm get sass

D. npm run sass

Solution

1. Step 1: Recall npm install syntax

   The correct npm command to install a package globally is npm install -g <package-name>.

2. Step 2: Match the command to Dart SASS

   For Dart SASS, the package name is sass, so the command is npm install -g sass.

3. Final Answer:

   npm install -g sass -> Option A

4. Quick Check:

   npm install -g package = A [OK]

Hint: Use 'npm install -g package' to install globally [OK]

Common Mistakes:

• Using 'npm sass install' which is invalid syntax
• Confusing 'npm get' with install
• Trying to run sass with 'npm run' without setup

3. What will happen if you run the command sass --watch styles.scss:styles.css in your terminal?

medium

A. It compiles styles.scss to styles.css once and exits

B. It watches styles.scss and updates styles.css on changes

C. It watches styles.css and updates styles.scss on changes

D. It throws an error because of wrong syntax

Solution

1. Step 1: Understand the --watch flag

   The --watch flag tells SASS to monitor the source file for changes continuously.

2. Step 2: Analyze the command's file mapping

   styles.scss:styles.css means compile styles.scss into styles.css whenever styles.scss changes.

3. Final Answer:

   It watches styles.scss and updates styles.css on changes -> Option B

4. Quick Check:

   --watch updates CSS on SASS changes = C [OK]

Hint: Use --watch to auto-update CSS on SASS file changes [OK]

Common Mistakes:

• Thinking it compiles only once
• Confusing source and output files
• Assuming syntax error in correct command

4. You ran npm install -g sass but get a 'command not found' error when typing sass. What is the likely cause?

medium

A. You need to restart the terminal or add npm global bin to PATH

B. npm did not install sass globally

C. The sass package is deprecated and removed

D. You must run sass with 'node sass' command

Solution

1. Step 1: Understand global install effects

   Installing globally adds sass to a folder that must be in your system PATH to run from terminal.

2. Step 2: Identify common PATH issues

   If PATH is not updated or terminal not restarted, the system won't find the sass command.

3. Final Answer:

   You need to restart the terminal or add npm global bin to PATH -> Option A

4. Quick Check:

   PATH update needed after global install = A [OK]

Hint: Restart terminal or update PATH after global npm install [OK]

Common Mistakes:

• Assuming sass package is deprecated
• Trying to run sass with 'node sass'
• Thinking npm install failed without checking PATH

5. You want to automatically compile all SASS files in the src/sass folder into CSS files in dist/css folder whenever you save changes. Which command should you use?

hard

A. sass watch src/sass dist/css

B. sass src/sass dist/css --watch

C. sass --watch src/sass:dist/css

D. sass --watch src/sass/*.scss dist/css/*.css

Solution

1. Step 1: Understand folder watching syntax

   The syntax sass --watch input-folder:output-folder watches all SASS files in input-folder and compiles to output-folder.

2. Step 2: Evaluate each option

   sass --watch src/sass:dist/css uses correct syntax. Options A, B, and C have wrong order or invalid syntax.

3. Final Answer:

   sass --watch src/sass:dist/css -> Option C

4. Quick Check:

   Folder watch uses --watch input:output = D [OK]

Hint: Use --watch with folder paths separated by colon [OK]

Common Mistakes:

• Using spaces instead of colon between folders
• Trying to watch files with wildcards incorrectly
• Using 'sass watch' instead of 'sass --watch'