Setting up SASS (npm, dart-sass) - Quick Revision & Summary

Recall & Review

beginner

What is SASS and why do we use it in web development?

SASS is a tool that helps write CSS easier and faster. It adds features like variables and nesting, making stylesheets simpler to manage and change.

beginner

What command installs dart-sass using npm?

You run npm install -D sass to add dart-sass as a development tool in your project.

beginner

How do you compile a SASS file to CSS using dart-sass in the terminal?

Use npx sass input.scss output.css to turn your SASS file into a CSS file you can use in your website.

intermediate

Why is it helpful to add a watch command when working with SASS?

The watch command automatically updates your CSS whenever you save changes in your SASS files, saving time and avoiding manual compiling.

intermediate

What is the difference between installing SASS globally and locally with npm?

Global install lets you use SASS commands anywhere on your computer. Local install keeps SASS inside your project, making it easier to manage versions and share with others.

Which npm command installs dart-sass as a development dependency?

A npm install sass -g

B npm install -D sass

C npm install sass

D npm update sass

The -D flag installs sass as a development dependency locally in your project.

What does the command npx sass input.scss output.css do?

A Installs SASS globally

B Creates a new SASS project

C Runs SASS to convert input.scss into output.css

D Deletes output.css

This command compiles the SASS file into a CSS file you can use in your website.

Why might you use the watch option with SASS?

A To automatically recompile CSS when SASS files change

B To install SASS globally

C To uninstall SASS

D To create a new SASS file

Watching saves time by updating CSS automatically when you save changes in SASS files.

Which of these is NOT a benefit of using SASS?

A Automatically fixes HTML errors

B Nesting selectors for clarity

C Variables for colors and sizes

D Mixins to reuse code

SASS helps with CSS, but it does not fix HTML errors.

What is the main reason to install SASS locally in a project?

A To speed up your internet connection

B To use SASS commands anywhere on your computer

C To automatically update npm

D To keep project dependencies organized and consistent

Local install keeps tools tied to the project, making sharing and version control easier.

Explain the steps to set up SASS in a new web project using npm and dart-sass.

Think about installing, compiling, and automating.

Describe why using SASS can improve your CSS workflow and how the watch command helps.

Focus on benefits and automation.