sass

node-sass

node-sass requires node

Install Node

If you don’t already have node installed you can install the ubuntu package:

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Or use the latest from nodesource repository as follows:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

You’ll probably need build-essentials if you don’t already have in installed:

sudo apt-get install build-essential

Install node-sass

npm install -g node-sass

node-sass usage

Compile a scss file one time:

node-sass -o <output directory> <relative path to scss file>

Compile all scss files in a directory file one time:

node-sass -o <output directory> <relative path to directory containing scss files>

Watch a directory containing scss files and compile on the fly:

node-sass -o <output directory> <relative path to directory containing scss files> -w

node-sass Options

By default node-sass generates css with each attribute on a new line and the closing brace on the same line as the last attribute. Use the expanded output style to generate pretty output:

--output-style=expanded

For a compact output use:

--output-style=expanded

Sass

Sass files have the extension “.scss”

Simple example

The scss/style.scss file containing the following:

.example {
  p {
    color: green;
  }
}

Can be compiled (in watch mode) to css/style.css using the command:

node-sass -o css scss -w --output-style=expanded

The css/style.css file will contain:

.example p {
  color: green;
}