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'.