How to Install and Compile Sass (npm, CLI, and Dart Sass)

Install Sass in one line, then compile with one command

The fastest way to install Sass is with npm: run npm install -D sass inside your project, then compile with npx sass input.scss output.css. That gives you Dart Sass, the official and only actively maintained implementation, and it works the same on macOS, Windows, and Linux. Everything else in this guide — the CLI flags, the watch mode, the global install, and the build-tool setups — is just refinement on top of those two commands.

If you only remember two lines, remember these:

npm install -D sass
npx sass scss/main.scss css/main.css

The rest of this guide explains the options so you can pick the install method that fits your project and avoid the outdated versions that still show up in old tutorials.

Which Sass should you install?

There have been three implementations of Sass over the years, and this trips up beginners because search results are full of dead advice. Here is the current state:

The practical takeaway: install sass, not node-sass. The node-sass package wraps LibSass, which was officially deprecated and no longer receives new Sass features like the modern @use and @forward module system. If you inherit a project using node-sass, plan to swap it for sass — the npm package name is the main thing that changes.

For a refresher on what the preprocessor actually does before you install it, see what is Sass.

Method 1: Install Sass with npm (recommended)

If your project already has Node.js and a package.json, npm is the cleanest option. It pins the Sass version per project, so every teammate and your CI server compile with the exact same compiler.

Step 1 — Make sure Node.js is installed

Sass's npm package needs Node. Check whether you have it:

node -v
npm -v

If those print version numbers (Node 14 or newer is fine; any recent LTS is ideal), you're set. If not, install Node.js from nodejs.org first — the LTS build is the safe choice.

Step 2 — Install Sass as a dev dependency

Inside your project folder:

npm install --save-dev sass

The --save-dev flag (shortened to -D) records Sass under devDependencies in package.json, which is correct because Sass is a build tool, not something your shipped site needs at runtime.

Step 3 — Compile a file

Use npx to run the locally installed binary:

npx sass scss/main.scss css/main.css

npx finds the sass executable inside node_modules/.bin so you don't need a global install. The first path is your source, the second is the CSS file Sass writes.

Step 4 — Add npm scripts

Typing that path every time gets old. Add scripts to package.json so the commands are short and self-documenting:

{
  "scripts": {
    "sass": "sass scss/main.scss css/main.css",
    "sass:watch": "sass --watch scss/main.scss css/main.css"
  }
}

Now npm run sass compiles once and npm run sass:watch recompiles automatically on every save.

Method 2: Install Sass globally with the CLI

If you want a sass command available everywhere — handy for quick experiments or projects without a Node setup — install it globally:

npm install -g sass

Then use it directly, no npx:

sass input.scss output.css
sass --watch input.scss output.css

There are also standalone options that don't require Node at all. On macOS you can use Homebrew:

brew install sass/sass/sass

On Windows, Chocolatey works:

choco install sass

The Dart Sass team also publishes standalone archives on the GitHub releases page for people who want a single executable with no package manager. All of these give you the same Dart Sass CLI.

npm vs global install: which to choose?

For anything you'll maintain or ship, prefer the local install. Reach for global only when you want a throwaway sass command.

Using watch mode and multiple files

Watch mode is what makes the day-to-day workflow pleasant. Instead of compiling by hand, Sass listens for changes:

sass --watch scss:css

The scss:css syntax compiles every .scss file in the scss folder into a matching file in the css folder — no need to name each file. This folder-to-folder mapping is the most common setup for a real project.

Useful CLI flags

For a production build, compress the output:

sass scss/main.scss css/main.css --style=compressed --no-source-map

By default Sass emits an expanded, readable stylesheet plus a source map, which is exactly what you want during development.

Method 3: Let your build tool handle Sass

Most modern front-end tooling can compile Sass for you, so you often don't run the CLI directly at all. In these setups you still install the sass package — the bundler calls it under the hood.

• Vite: Install sass and Vite compiles any .scss file you import automatically. No config needed for a basic setup — just import './styles/main.scss'.
• webpack: Add sass-loader alongside sass, css-loader, and style-loader in your loader chain.
• Parcel: Detects .scss imports and compiles them with zero configuration once sass is installed.

The rule of thumb: if you already use a bundler, install sass as a dev dependency and let the bundler drive it. Save the standalone CLI for static sites or plain HTML projects without a build step.

Verify your install and compile your first file

Confirm the compiler is working:

sass --version

You should see a version number (Dart Sass releases are numbered like 1.x.x). Then create a tiny test file, scss/main.scss:

$brand: #2f6f4f;

.button {
  padding: 0.75rem 1.25rem;
  background: $brand;
  border-radius: 6px;

  &:hover {
    background: darken($brand, 8%);
  }
}

Compile it:

npx sass scss/main.scss css/main.css

Open css/main.css and you'll see the nested rule flattened into standard CSS with the variable substituted in. That confirms the whole pipeline works.

Note: darken() and the other global color functions still work, but modern Sass recommends the color.adjust() and color.scale() functions from the built-in sass:color module. The one-liner above is fine for a smoke test; reach for the module functions in real code.

Common install problems

• command not found: sass — You likely installed locally, not globally. Use npx sass ..., or add an npm script.
• You accidentally installed node-sass — Uninstall it (npm uninstall node-sass) and install sass instead. They are not interchangeable for modern syntax.
• @use rules throw errors — You're probably on an old LibSass-based setup. The module system requires Dart Sass.
• Permission errors on a global install — Avoid sudo; fix your npm prefix or just use a local install, which sidesteps the problem entirely.

Where to go next

Once Sass compiles, the payoff is in the features: variables, nesting, partials, mixins, and the module system. Work through the complete guide to Sass to put your new setup to use, and if you're weighing your whole toolchain, compare the options in CSS preprocessors vs PostCSS. You can also browse more setup and build articles in Tooling & Workflow.

The short version stays true no matter how deep you go: npm install -D sass, point the CLI at your source file, and add --watch while you work.