0
0
SASSmarkup~5 mins

Watch mode for auto-compilation in SASS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Watch mode helps you save time by automatically updating your CSS whenever you change your Sass files. You don't have to run commands again and again.

When you are writing styles and want to see changes immediately in your browser.
When you want to avoid manually compiling Sass every time you save a file.
When working on a project with many Sass files that change often.
When you want to speed up your workflow and reduce mistakes from forgetting to compile.
When you are learning Sass and want quick feedback on your code changes.
Syntax
SASS
sass --watch input.scss:output.css

input.scss is your Sass file you want to watch.

output.css is the CSS file that will update automatically.

Examples
Watch styles.scss and update styles.css automatically.
SASS
sass --watch styles.scss:styles.css
Watch all Sass files in the scss folder and compile them to the css folder.
SASS
sass --watch scss:css
Watch and compile with compressed CSS output for smaller file size.
SASS
sass --watch main.scss:main.css --style compressed
Sample Program

This example shows a simple HTML page linked to a CSS file generated from styles.scss. When you run sass --watch styles.scss:styles.css, any changes you make in styles.scss will update styles.css automatically. You will see the heading in blue and the paragraph in green.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Watch Mode Demo</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Hello, Watch Mode!</h1>
  <p>This text will be styled by Sass.</p>
</body>
</html>

/* styles.scss */
h1 {
  color: blue;
  font-family: Arial, sans-serif;
}
p {
  color: green;
  font-size: 1.2rem;
}
OutputSuccess
Important Notes

Make sure you have Sass installed on your computer to use watch mode.

Watch mode runs in the terminal and keeps running until you stop it (usually with Ctrl+C).

You can watch whole folders to handle many Sass files at once.

Summary

Watch mode automatically compiles Sass files when you save changes.

Use sass --watch input.scss:output.css to start watching.

This saves time and helps you see style changes immediately in your browser.