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.

Requirements

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

Setup

  1. Install node-sass

    npm install -g node-sass
    
  2. Create a SASS file to compile to CSS

    $width: 460
    $height: 250
    body
        background-color: #37474F
    .header
        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

  3. 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.

  4. (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.

Resources

FAQ

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:

  • Understanding Visual Testing
  • The Redux Saga Black Box
  • What my college degree gave me
  • Technical Leaders Enabling Stronger Teams
  • Finding Your Gateway to Learning Vue
  • Why Write Server Rendered Frontend Apps
  • comments powered by Disqus
    © 2019. All rights reserved.