build with purpose

Simple Setup: Sass with NPM

SASS is a tool built with Ruby that allows you to write CSS more simply with variable support and with an arguably nicer syntax. SASS stands for ‘Syntactically Awesome cSS’. The bare minimum SASS setup is actually to run it on Ruby and you can find out how on their website.


Node and NPM. I'm using NPM(3.10.3) and Node(6.4.0)


  1. Install node-sass
npm install -g node-sass
  1. Create a SASS file to compile to CSS
$width: 460
$height: 250
        background-color: #37474F
        margin-top: 10px
        margin-right: auto
        margin-left: auto
        width: $width + px
        height: $height + 150 + px

I stored this file in a directory called app/styles

  1. Compile your SASS directory using node-sass from the command line
node-sass app/styles/main.sass app/main.css

Just make sure to specify the input .SASS file followed by the output .CSS file. If you need to compile an entire directory, the syntax is pretty similar

node-sass app/styles -o app/

The -o operator specifies the output directory and the input for this example is the app/styles directory.

  1. (Optional) Add script to package.json
"scripts": {
        "build-css": "node-sass --output-style compressed app/styles -o app/"

I added the --output-style compressed to collapse whitespace in the resulting CSS file to produce smaller files. This functionality also works from the command line. Remember to install node-sass to your package.json file too if you create this script.

I found the node-sass package to have the simplest interface for running npm scripts to compile my CSS from SASS. You may find this package used in other builds so it's nice to be able to see what it does at it's most basic.



What is Simple Setup?

Simple Setup is a new creation of mine that explains how to use a tool or library as simply as possible to get started. I chose SASS as my first example because it was the most difficult for me to get my head around when it came to just getting something working in an NPM build.

What's the difference between SASS and SCSS?

There's an good Stack Overflow article that gives a pretty good answer. I mostly cared about the name (Sassy CSS)

Make my day and share this post:

Other posts to peak your interest:

  • Posts
  • Seeking Change
  • Shipping Software in Japan
  • Understanding Visual Testing
  • The Redux Saga Black Box
  • What my college degree gave me
  • comments powered by Disqus