Sass Installation

What You’ll Learn

Install official Dart Sass, verify the CLI, and compile your first .scss file to CSS. This page covers npm, package managers, standalone binaries, watch mode, and five practical examples.

Why Install Sass?

Browsers understand CSS, not SCSS. A Sass compiler reads your .scss or .sass source and writes standard CSS. You install that compiler once, then run it from the terminal, a GUI app, or your build tool (Vite, Webpack, Parcel, and others often compile SCSS for you).

• Dart Sass is the primary, actively maintained implementation.
• The sass command compiles files and can watch for changes.
• GUI apps (for example CodeKit, Prepros) wrap the same idea with a visual UI.
• Save source as UTF-8 (see Sass Parsing).

🚀 Choose an Install Path

📦 Install with npm

Official docs: the Sass team maintains two Node packages that share the standard JavaScript API.

• sass — pure JavaScript; a bit slower; works everywhere Node works.
• sass-embedded — JS API around the Dart VM; faster; Windows, macOS, Linux.

# Global CLI (pure JS implementation)
npm install -g sass

# Or project-local (recommended for teams)
npm install --save-dev sass

# Faster alternative where supported
npm install --save-dev sass-embedded

💻 Standalone, Homebrew & Chocolatey

Standalone: download the OS/CPU package from the Dart Sass GitHub releases, extract the dart-sass folder, and add it to your system PATH. No other dependencies are required (sass.bat on Windows, sass on macOS/Linux).

# macOS / Linux (Homebrew)
brew install sass/sass/sass

# Windows (Chocolatey)
choco install sass

Community wrappers also exist for Java/Gradle/Maven and other ecosystems—see the official install page when you need those.

✅ Verify & First Compile

After install, confirm the executable works, then compile SCSS to CSS:

sass --version
sass --help

# Compile one file
sass source/stylesheets/index.scss build/stylesheets/index.css

# Or a simple local pair
sass styles.scss styles.css

sass --version should print a Dart Sass version string (for example 1.69.5 compiled with dart2js …). If the command is not found, fix PATH or use npx sass for a project-local install.

Examples Gallery

Commands you will use on day one, plus a tiny stylesheet that compiles to verified CSS.

# Anywhere on your machine
npm install -g sass

# Inside a project (package.json)
npm install --save-dev sass
npx sass --version

# npm finishes without errors, then:
npx sass --version
# prints something like:
1.69.5 compiled with dart2js 3.1.5

sass --version
sass --help

1.69.5 compiled with dart2js 3.1.5

# --help lists flags such as --watch, --style, --no-source-map

$brand: #036;

.button {
  background: $brand;
  color: #fff;

  &:hover {
    background: #024;
  }
}

sass styles.scss styles.css

.button {
  background: #036;
  color: #fff;
}
.button:hover {
  background: #024;
}

# Single file pair
sass --watch styles.scss:styles.css

# Or watch a folder into another folder
sass --watch scss:css

Sass is watching for changes. Press Ctrl-C to stop.
Compiled styles.scss to styles.css.
# ...updates each time you save styles.scss

sass --style=compressed styles.scss styles.min.css

.button{background:#036;color:#fff}.button:hover{background:#024}

🚀 Real-World Use Cases

• Learning — global sass CLI + a single styles.scss.
• Team apps — sass as a devDependency + npm scripts.
• CI/CD — compile compressed CSS in the pipeline before deploy.
• Bundlers — Vite/Webpack load SCSS; still useful to know the CLI.
• Design systems — watch a scss/ folder into css/ during local work.

⚠️ Common Pitfalls

• sass: command not found — PATH issue or use npx sass for local installs.
• Editing CSS only — changes in generated CSS are overwritten on the next compile.
• Old LibSass / node-sass — prefer Dart Sass for new projects.
• Wrong working directory — run the CLI from the folder that contains your paths.
• Forgetting watch vs one-shot — one compile does not update after later saves.

💡 Best Practices