Watch mode for auto-compilation in SASS - Mini Project: Build & Apply

Watch Mode for Auto-Compilation in Sass

📖 Scenario: You are working on a website and want your Sass files to automatically compile to CSS whenever you save changes. This helps you see your style updates instantly without running commands manually each time.

🎯 Goal: Set up Sass watch mode to auto-compile styles.scss into styles.css whenever you save changes.

📋 What You'll Learn

Create a Sass file named styles.scss with some basic styles.

Use the Sass CLI to watch styles.scss and auto-compile it to styles.css.

Ensure the watch command runs continuously and updates styles.css on every save.

💡 Why This Matters

🌍 Real World

Web developers use Sass watch mode to speed up styling workflows by automatically compiling Sass files to CSS on every save.

💼 Career

Knowing how to set up Sass watch mode is essential for front-end developers to maintain efficient and modern CSS workflows.

1

Create the Sass file styles.scss

Create a file named styles.scss and write these exact styles inside it:
body { background-color: #f0f0f0; }

SASS

# Create styles.scss with body background color
// Your code here

Need a hint?

Use a text editor to create styles.scss and add the CSS inside curly braces.

2

Install Sass CLI if not installed

Make sure you have the Sass command line tool installed by running sass --version in your terminal. If not installed, install it using npm install -g sass.

SASS

body { background-color: #f0f0f0; }
// Check Sass CLI installation or install it

Need a hint?

Open your terminal and type sass --version to check. Use npm install -g sass if needed.

3

Run Sass watch command to auto-compile

Run this exact command in your terminal to watch styles.scss and compile it to styles.css automatically:
sass --watch styles.scss:styles.css

SASS

body { background-color: #f0f0f0; }
// Run sass --watch styles.scss:styles.css in terminal

Need a hint?

This command keeps running and updates styles.css whenever you save styles.scss.

4

Verify styles.css updates on saving styles.scss

After running the watch command, open styles.scss and add this new style:
h1 { color: blue; }
Save the file and check that styles.css now contains the compiled CSS for both body and h1 selectors.

SASS

body { background-color: #f0f0f0; }
// Add h1 color style and save styles.scss

Need a hint?

Editing and saving styles.scss should trigger Sass to update styles.css automatically.