Dart Sass CLI

What You’ll Learn

The Dart Sass command-line interface compiles Sass from your terminal. This page covers one-to-one and many-to-many modes, key flags (--style, --watch, source maps, stdin), and five beginner examples. Install first via Sass Installation.

What Is the Dart Sass CLI?

After you install Dart Sass, you get a sass executable. It reads .scss / .sass (and sometimes .css), parses the stylesheet, and writes CSS—either to a file or to the terminal.

• Extension picks the syntax: .scss → SCSS, .sass → indented, .css → plain CSS.
• Unknown extensions or stdin default to SCSS (override with --indented).
• Partials named _file.scss are skipped when compiling whole directories.
• Use sass --help and sass --version anytime.

📄 One-to-One Mode

sass <input.scss> [output.css]

Compiles a single input to a single output. Omit the output path to print CSS to the terminal. Pass - as the input to read from standard input (defaults to SCSS unless --indented is set).

📦 Many-to-Many Mode

Official docs (Dart Sass 1.4.0+): separate inputs from outputs with a colon. You can list several pairs or map a whole directory.

# One file pair
sass style.scss:style.css

# Several files
sass light.scss:light.css dark.scss:dark.css

# All Sass files in themes/ → public/css/ (skips _partials)
sass themes:public/css

⚙️ Important Options

Also useful: --poll (with --watch on flaky network drives), --stop-on-error, --verbose, --quiet-deps, --fatal-deprecation, --no-charset, and source-map embedding flags. Run sass --help for the full list on your installed version.

🔍 Source Maps

By default, Dart Sass writes source maps next to CSS files so DevTools can show the original SCSS. Disable with --no-source-map. Control link style with --source-map-urls=relative|absolute, or embed with --embed-sources / --embed-source-map.

Examples Gallery

Verified with Dart Sass. Open each toggle for CSS or terminal output.

$brand: #036;

h1 {
  font-size: 40px;
  color: $brand;
}

sass style.scss
# or write a file:
sass style.scss style.css
sass style.scss:style.css

h1 {
  font-size: 40px;
  color: #036;
}

# themes/light.scss, themes/dark.scss, themes/_tokens.scss
sass themes:css

# Result: css/light.css and css/dark.css
# (_tokens.scss is a partial — no css/_tokens.css)

css/light.css
css/light.css.map
css/dark.css
css/dark.css.map
# no css/_tokens.css

sass --style=expanded style.scss
sass --style=compressed style.scss

h1{font-size:40px;color:#036}

echo "h1 {font-size: 40px}" | sass --stdin

# Indented syntax from stdin:
echo -e "h1\n  font-size: 40px" | sass --indented -

h1 {
  font-size: 40px;
}

sass --watch themes:public/css

# Remote / network drives if OS notifications fail:
sass --watch --poll themes:public/css

# Only rebuild outdated files once:
sass --update themes:public/css

Compiled themes/light.scss to public/css/light.css.

# After you edit themes/dark.scss...
Compiled themes/dark.scss to public/css/dark.css.

🚀 Real-World Use Cases

• Local learning — one-to-one compile + stdout for instant feedback.
• Multi-theme sites — sass --watch themes:css.
• CI production — --style=compressed --no-source-map.
• npm scripts — wrap CLI commands in package.json.
• Quick math checks — sass --interactive for SassScript.

⚠️ Common Pitfalls

• Mixing modes — do not combine --stdin with many-to-many pairs.
• Expecting partial CSS — _partial.scss is skipped in directory compiles.
• Watch not seeing deep folders — only passed dirs / parents / load paths are watched.
• Surprise source maps — default on; use --no-source-map for clean deploys.
• Editing generated CSS — the next sass run overwrites it.

💡 Best Practices