Sass Installation and Compiling

Before you can use Sass on a website, you need the Sass compiler to turn .scss files into .css files.

Install Node.js

The easiest way to get Sass is through npm, which comes with Node.js. Download Node.js from its official website and install it. Then check it works in a terminal:

Example

bash

node -v
npm -v

Both commands should print a version number.

Install Sass

Inside your project folder, install the sass package:

Example

bash

npm install --save-dev sass

This installs Dart Sass, the official version. You may see old guides that mention "node-sass" or "Ruby Sass"; those are old and no longer maintained.

Compile Your First File

Make a project like this:

Example

text

my-website/
  index.html
  scss/
    style.scss
  css/

Write some SCSS in scss/style.scss:

Example

scss

$main-color: #cc6699;

h1 {
  color: $main-color;
}

Now compile it. The first path is the input file and the second is the output file:

Example

bash

npx sass scss/style.scss css/style.css

Sass creates css/style.css:

Output

h1 {
  color: #cc6699;
}

Your index.html links to the CSS file, never to the SCSS file:

Example

html

<link rel="stylesheet" href="css/style.css">

Watch Mode

Running the command after every change is tiring. With --watch, Sass keeps running and compiles again each time you save:

Example

bash

npx sass --watch scss:css

scss:css means "compile every file in the scss folder into the css folder".

You can save this as a script in package.json:

Example

json

{
  "scripts": {
    "sass": "sass --watch scss:css"
  }
}

Then start it with npm run sass.

Output Styles

Sass can write the CSS in two styles:

Option	Output
`--style=expanded`	Readable CSS with one declaration per line (the default)
`--style=compressed`	All on one line with no extra spaces, smallest file for live websites

Example

bash

npx sass --style=compressed scss/style.scss css/style.min.css

For the example above, the compressed output is:

Output

h1{color:#c69}

Sass even shortened #cc6699 to #c69, which means the same colour.

Source Maps

By default Sass also writes a .css.map file. It lets the browser's developer tools show you which SCSS line a style came from, which helps a lot when fixing bugs. Turn it off with --no-source-map if you do not need it.

Other Ways to Compile

Build tools such as Vite compile .scss files automatically once the sass package is installed
VS Code extensions like "Live Sass Compiler" compile when you save
Frameworks like Next.js and Angular support SCSS out of the box

Errors in SCSS stop the compiler and show the file and line number. Read the message carefully; usually it is a missing semicolon, bracket or a misspelled variable.

Exercise

Which command keeps running and recompiles your SCSS every time you save?

npx sass style.scssnpx sass --watch scss:cssnpm install sassnpx sass --style=compressed