Sass — Installation

Install via npm

npm install -g sass

Verify installation:

sass --version

Install locally

npm install sass --save-dev

Add to package.json scripts:

{
  "scripts": {
    "build": "sass src/style.scss dist/style.css",
    "watch": "sass --watch src/style.scss dist/style.css"
  }
}

Install via yarn

yarn add sass

VS Code extension

Install the Live Sass Compiler extension:

1. Open VS Code extensions
2. Search "Live Sass Compiler"
3. Click Install
4. Click "Watch Sass" in the status bar

Command line usage

# Compile once
sass input.scss output.css

# Watch for changes
sass --watch src:dist

# Compile directory
sass src/scss:dist/css

# Output style
sass --style=compressed input.scss output.css

Using with npm scripts

{
  "scripts": {
    "sass:build": "sass --style=compressed src/scss/main.scss dist/css/style.css",
    "sass:watch": "sass --watch src/scss/main.scss dist/css/style.css"
  }
}

Using with PostCSS

npm install sass postcss postcss-cli autoprefixer

postcss.config.js:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

package.json:

{
  "scripts": {
    "build": "sass src/scss:dist/css && postcss dist/css/*.css --use autoprefixer -d dist/css"
  }
}

Online compiler

Use the Sass Playground at sass-lang.com/play for quick experiments without installing anything.

Mini Practice

1. Install Sass globally
2. Create a .scss file
3. Compile it to CSS
4. Set up a watch script

Up Next

Continue with Basic Syntax — variables, nesting, and imports.