Sass Installation

Installing Sass means adding the Dart Sass compiler to your project so your .scss source files can be turned into plain CSS.

Installing Dart Sass

Dart Sass is the primary, actively maintained implementation of the Sass language. Older implementations - LibSass and the node-sass package that wrapped it, along with the original Ruby Sass - are deprecated, so any new project should install the sass package, which is Dart Sass distributed for npm.

Installing via npm

In a Node.js project, add Sass as a development dependency. It only needs to run during your build, never in the browser, so it belongs in devDependencies rather than dependencies.

Install Sass with npm

<!DOCTYPE html>
<html>
<body>
<div style="font-family: sans-serif; max-width: 640px; margin: 40px auto; padding: 20px; border: 1px solid #E9EBE6; border-radius: 8px; background: #F5F6F5;">
  <h2 style="margin-top:0;">Not runnable in the browser</h2>
  <p>This is a terminal command or config file for Sass's build tooling, not SCSS itself, so there's nothing to compile or preview here. Read the code on the left.</p>
</div>
</body>
</html>

Compiling a File from the Command Line

Once installed, the sass command takes an input file and an output file. Pass --watch to keep the compiler running in the background so it recompiles automatically every time you save a source file.

Compile SCSS to CSS

<!DOCTYPE html>
<html>
<body>
<div style="font-family: sans-serif; max-width: 640px; margin: 40px auto; padding: 20px; border: 1px solid #E9EBE6; border-radius: 8px; background: #F5F6F5;">
  <h2 style="margin-top:0;">Not runnable in the browser</h2>
  <p>This is a terminal command or config file for Sass's build tooling, not SCSS itself, so there's nothing to compile or preview here. Read the code on the left.</p>
</div>
</body>
</html>
  • npm - install the sass package as a dev dependency (recommended for most projects)
  • Standalone executable - download a prebuilt binary with no Node.js required
  • Homebrew - install a system-wide sass command on macOS or Linux
  • Build tool plugins - Vite, webpack, and other bundlers offer Sass integrations that call the compiler for you
  • Editor extensions - some code editors can compile on save during local development
Note: Add build and watch commands as npm scripts so the whole team runs the exact same compile command instead of retyping long CLI flags.

Add a Build Script

<!DOCTYPE html>
<html>
<body>
<div style="font-family: sans-serif; max-width: 640px; margin: 40px auto; padding: 20px; border: 1px solid #E9EBE6; border-radius: 8px; background: #F5F6F5;">
  <h2 style="margin-top:0;">Not runnable in the browser</h2>
  <p>This is a terminal command or config file for Sass's build tooling, not SCSS itself, so there's nothing to compile or preview here. Read the code on the left.</p>
</div>
</body>
</html>
ImplementationStatusNotes
Dart Sass (sass package)Actively maintainedRecommended for all new projects
LibSass / node-sassDeprecatedNo longer receives new Sass language features
Ruby SassDiscontinuedThe original implementation, no longer maintained
Note: Avoid installing node-sass in new projects. It is deprecated, tied to specific Node.js versions through native bindings, and missing newer Sass language features that Dart Sass already supports.
Note: You can install Sass globally with npm install -g sass to get a system-wide sass command, but a local, per-project install is generally preferred so every contributor and CI machine compiles with the exact same version.

Exercise: Sass Installation

Which npm package is recommended today for installing Sass?

Keep Going

Sass Interview QuestionsPractice real questions asked for SassFrontend Developer SalarySee what Frontend Developer roles pay in the marketAuto Apply for JobsApply to open roles related to Sass and tweak your resume