Saturday, 1 April 2017

Post 66: How to SASS

How to use SASS?

SASS stands for "Syntactically Awesome Stylesheets Sass". It is a CSS preprocessor and offers you stuff you can't do normally with CSS, e.g. mixins, loops, inheritence.
  1. Create a new folder and "npm init"
  2. "npm install node-sass"
  3. Create a new folder "css" on the same level as "package.json"
  4. Go to your package.json and write in the scripts key "start": "node-sass -o css scss"
  5. Create a new folder "scss" and create a new file scss "main.scss" in it
  6. In the main.scss file write:
.red { color: red; }
.red-dark { color: darken(red, 20%);}

    7. Go to your terminal and write "npm start"
    8. A new file "main.css" was created in the folder "css" for you.