Setting up SASS

29 Jul 2019

SASS is a CSS framework that helps your organise the structure of your CSS files better by allowing you to seperate them and reuse CSS code in the form of mixins, variables etc. My favourate part of SASS is the ability to nest rules, which is especially awesome when used in conjunction with the "Block Element Modifier (BEM) methodology.

I'm setting up SASS at work so these are just going to be quick notes with commands and little explanation. It helps to document things like this when you can't spent too much time writing up why's.

I'm setting SASS up at work, so will start by creating a new branch to work from called "restyle/sass"

git checkout -b restyle/css

npm install node-sass --save-dev mkdir sass && cd sass touch main.scss

Create a new package.json in root directory. source

npm init

Open package json and add the compile:sass key value pair shown below in the scripts section:

Compile SASS automatically script
  
  "scripts": {
    "compile: sass": "node-sass sass/main.scss css/style.css -w"
  }
  
  

When you run "npm compile:sass" in your terminal, the imported sass files inside your main.scss file will be compiled inside of your main css stylesheet.

The watch flag at the end of the command (-w) watches for any changes to your sass files. When a change is made (recognised when your sass files are saved), the sass is compiled automatically, so that you don't have to run the compile command every time you want to see the changes you made.

npm compile:sass

Add the base folder to your sass folder

mkdir base && cd base touch _reset.scss

Add css reset code to _reset.scss. I used Eric Meyers reset.

Import the _reset.scss file into the main.scss adding the following import statement to your main.scss file:

@import 'base/reset';

Official SASS Documentation