Sass Dart Sass CLI

Beginner
12 min read
Updated: Nov 2026
5 examples
Terminal + CSS
Dart Sass CLI compiling SCSS to CSS from the terminal
Definition

Definition and Usage

The Dart Sass CLI is the sass executable that compiles .scss, .sass, and sometimes .css files to CSS from your terminal. It is the primary Sass implementation for new projects.

You can compile one file at a time, map many inputs to many outputs, watch folders while you edit, and control style, source maps, and load paths. Install first via Sass Installation, then deepen watching with --watch.

Two modes.

One-to-one: sass input.scss [output.css]. Many-to-many: sass input:output or sass src:css.

Extensions matter.

.scss → SCSS, .sass → indented syntax, .css → plain CSS. Stdin defaults to SCSS unless you pass --indented.

Prefer Dart Sass.

Ruby Sass is end-of-life. Use this CLI (not the legacy Ruby CLI) for all new work.

Syntax

Syntax

terminal
# One-to-one
sass style.scss
sass style.scss style.css

# Many-to-many
sass style.scss:style.css
sass light.scss:light.css dark.scss:dark.css
sass themes:public/css

# Common flags
sass --style=compressed style.scss style.css
sass --watch themes:public/css
sass --update themes:public/css

Pattern: choose a mode → add style / watch / load-path flags → read CSS or the terminal log.

Reference

Modes & Options

Core CLI shapes from the official Dart Sass docs:

Command / flagMeaning
sass in.scss [out.css]One-to-one (stdout if no output path)
sass in:out / src:cssMany-to-many; directories skip _ partials
--style=expanded|compressedReadable vs minified CSS (-s)
--watch / -wRecompile on change (see --watch)
--updateCompile only outdated stylesheets
--stdin / -Read SCSS from standard input
--load-path / -IExtra folders for @use / imports
--no-source-mapSkip default source map files
--interactive / -iREPL for SassScript expressions
--quiet / -qSilence warnings and @debug
Code

CLI Examples

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

Example 1 — One-to-One Compile

Omit the output path to print CSS in the terminal, or write a file.

SCSS
$brand: #036;

h1 {
  font-size: 40px;
  color: $brand;
}
terminal
sass style.scss
# or write a file:
sass style.scss style.css
sass style.scss:style.css

How It Works

  1. Space-separated paths are one-to-one mode.
  2. No output path prints CSS to stdout.
  3. Colon pair style.scss:style.css is many-to-many for one file.
  4. Same CSS either way once variables resolve.

Example 2 — Compile a Directory

Map themes/ to css/. Files starting with _ are not emitted.

terminal
# 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)

How It Works

  1. Directory mode mirrors each non-partial Sass file.
  2. Partials (_) are skipped as CSS outputs.
  3. Source maps are written by default next to CSS.
  4. Share tokens via partials without empty CSS files.

Example 3 — Expanded vs Compressed

Same source; different --style output.

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

How It Works

  1. expanded is the default — one declaration per line.
  2. compressed strips whitespace for production.
  3. Learn with expanded; ship compressed in CI/npm scripts.
  4. Short flag: -s compressed.

Example 4 — Compile from Stdin

Pipe a snippet into Sass without creating a file.

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

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

How It Works

  1. --stdin or input - reads from the pipe.
  2. Defaults to SCSS unless --indented is set.
  3. Not for many-to-many colon mode.
  4. Handy for quick experiments and scripts.

Example 5 — Watch a Folder

After the first compile, Sass stays open and rebuilds on change.

terminal
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

How It Works

  1. First pass compiles like --update.
  2. Process stays open and rebuilds on save.
  3. Watches CLI paths and load paths — not every @use folder alone.
  4. Stop with Ctrl+C. More detail on the --watch page.

Edge Cases & Pitfalls

Most CLI issues are mode mix-ups, missing PATH, or watching the wrong folders.

modes

Do not mix stdin with colon mode

--stdin / - is one-to-one only. Many-to-many needs file or directory pairs.

partials

Expect no CSS for _files

Directory compiles skip _partial.scss. Load them with @use from entry files.

watch

Watch only what you pass

Sass watches CLI directories and load paths. Put shared folders on --load-path if needed.

maps

Source maps are on by default

For production CI you often want --style=compressed --no-source-map.

Toolchain

Sass Support

This page documents the Dart Sass executable. Feature flags land in Dart Sass first; always prefer it over LibSass / Ruby Sass.

ImplementationStatus
Dart Sass CLICurrent — install via npm, Homebrew, Chocolatey, or binary
LibSass / node-sassDeprecated — migrate to Dart Sass
Ruby Sass CLIEnd-of-life — see Ruby Sass CLI
BrowsersN/A — they only receive compiled CSS

Many-to-many mode needs Dart Sass 1.4+. --watch needs 1.6+. Check sass --version if a flag is missing.

Remember

Key Takeaways

  • Two modes: space paths (one-to-one) or colon pairs / folders (many-to-many).
  • Develop with --watch; ship with --style=compressed.
  • Partials starting with _ are skipped in directory compiles.
  • Dart Sass only for new projects — Ruby Sass is unmaintained.

One line: the Dart Sass CLI turns SCSS into CSS from the terminal — one file, whole folders, or a live watch loop.

Compile

Compile Notes

Conceptual flow when you run sass:

flow.txt
1. Resolve mode (one-to-one vs many-to-many)
2. Parse each input (.scss / .sass / .css / stdin)
3. Load modules via @use / load paths
4. Emit CSS (+ source map unless disabled)
5. Optionally keep watching (--watch) or exit

Frequently Asked Questions

The sass executable that compiles .scss, .sass, and sometimes .css files to CSS from the terminal. Install it via npm, Homebrew, Chocolatey, or a standalone binary.
sass <input.scss> [output.css] compiles one input file to one output file (or prints CSS to the terminal if you omit the output path).
sass input:output or sass srcDir:outDir compiles one or more pairs. Directory mode writes CSS for each Sass file and skips partials that start with _.
Pass --watch (or -w), usually with colon pairs: sass --watch themes:public/css. Sass recompiles when those files or their dependencies change.
Controls CSS formatting. expanded (default) is readable. compressed removes extra whitespace for production.
Yes when writing CSS files. Pass --no-source-map to skip them. Other flags control relative/absolute URLs and embedding.

Next: Sass --watch

Keep the compiler running and rebuild CSS every time you save.

Sass --watch →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass Installation Sass --watch