Watch mode for auto-compilation in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does Sass watch mode do?

When you run Sass in watch mode, what happens?

A Sass compiles your files only once and then stops watching for changes.

B Sass deletes your .scss files after compiling them.

C Sass automatically recompiles your .scss files whenever you save changes.

D Sass converts your CSS files back into .scss files.

💡 Hint

Think about what 'watch' means in programming tools.

Watch mode means Sass keeps an eye on your files and recompiles them automatically when you save changes, so you don't have to run the command again manually.

📝 Syntax

intermediate

Which command starts Sass in watch mode?

You want Sass to watch the 'styles.scss' file and output to 'styles.css'. Which command is correct?

A sass --watch styles.scss styles.css

B sass styles.scss styles.css --watch

C sass styles.scss styles.css watch

D sass watch styles.scss styles.css

💡 Hint

The watch flag usually comes before the input and output files.

The correct syntax is 'sass --watch input.scss output.css'. The --watch flag tells Sass to keep watching the input file for changes.

❓ rendering

advanced

What happens visually when Sass recompiles in watch mode?

You run 'sass --watch styles.scss styles.css' and then save changes to 'styles.scss'. What do you see in the terminal?

A Nothing happens; you must restart the command.

B The terminal clears and shows an error message.

C The terminal closes automatically.

D A message showing the file was compiled successfully with the time stamp.

💡 Hint

Watch mode gives feedback when it recompiles.

When Sass recompiles in watch mode, it prints a message like 'Compiled styles.scss to styles.css in Xms' so you know it worked.

❓ selector

advanced

Which file does Sass watch in this command?

Given the command: 'sass --watch src/scss:dist/css', which files are being watched?

A Only a single file named 'src/scss' (which is invalid).

B All .scss files inside the 'src/scss' folder and its subfolders.

C All .css files inside the 'dist/css' folder.

D Only the 'dist/css' folder is watched.

💡 Hint

The colon separates input and output folders.

The command watches all .scss files inside 'src/scss' and compiles them to 'dist/css' folder, keeping the folder structure.

❓ accessibility

expert

How can you ensure your Sass watch setup is accessible for screen reader users?

You want to make sure your terminal output from Sass watch mode is accessible. What is the best practice?

A Use clear, descriptive messages and avoid color-only indicators in terminal output.

B Use only color changes to show errors or success messages.

C Disable all terminal output to avoid clutter.

D Use blinking text to catch attention.

💡 Hint

Think about how screen readers interpret text and colors.

Screen readers read text but cannot interpret colors or blinking. Clear messages help all users understand the status.