Watch Mode

Recompile automatically every time you save a file.

Syntaxsass --watch input.scss output.css

Recompiling by hand after every edit is tedious. The --watch flag makes Sass stay running and recompile instantly whenever a source file changes.

This is the workflow you will use during development. Start it once and leave it running in a terminal while you edit your styles.

Watching folders

You can watch an entire directory the same way you compile one: sass --watch src:css.

Example

Example · bash
# Watch a single file
sass --watch style.scss style.css

# Watch a whole project folder
sass --watch scss:css

# Output:
# Sass is watching for changes. Press Ctrl-C to stop.
# Compiled scss/style.scss to css/style.css.

When to use it

  • A developer runs sass --watch during local development so every file save instantly recompiles to CSS without switching to a terminal.
  • A team uses the watch command on the entire scss/ directory so any partial change triggers a recompile of only the affected output files.
  • A front-end developer combines sass --watch with a live-reload tool so the browser refreshes automatically each time a Sass file is saved.

More examples

Watch a single file

Monitors src/main.scss for changes and recompiles to dist/main.css automatically on every save.

Example · bash
sass --watch src/main.scss:dist/main.css

Watch an entire directory

Watches the entire scss/ directory and recompiles any changed file into its matching output in css/.

Example · bash
sass --watch scss/:css/

Watch mode in package.json

Defines two npm scripts — one for development watch mode and one for production builds — in package.json.

Example · json
{
  "scripts": {
    "sass:dev": "sass --watch scss/:public/css/ --style=expanded",
    "sass:build": "sass scss/:public/css/ --style=compressed"
  }
}

Related

sass compilingsass install

Discussion

  • Be the first to comment on this lesson.