Introduction

The day is not too far away when people will no longer write CSS codes, instead SASS would take over. Browser engines might also start supporting SASS and one may no longer need to compile SASS codes into CSS. If you're looking forward to start using and learning SASS, this is where you start with the easy installation guide.

Step by step:

• Make an empty folder as project
• Install git bash if already not installed
• Right click on the folder and select open git bash here
• Open your project folder with a code editor, I prefer VS Code
• Have nodejs installed
• Run the following commands-

With Gulp

npm install --save-dev gulp gulp-sass browser-sync
npm install -g gulp-cli
npm start

Your project structure can be like the following -

src/scss/style.scss
src/css/style.css
index.html
gulpfile.js

Copy gulpfile.js file and paste it on your local file.

Without gulp (Alternative way):

npm init
npm install lite-server --save-dev
npm install --save-dev node-sass
npm install --save-dev concurrently

optional-
npm install bootstrap

Your project structure should be like-

package.json
src/scss/style.scss
public/assets/css/style.css

Then open your package.json file and edit the script as the following-
"scripts": {
"dev": "lite-server --baseDir="public"",
"build": "node-sass src/scss -o public/assets/css",
"watch": "npm run build && node-sass src/scss -wo public/assets/css",
"start": "concurrently "npm run watch" "npm run dev""
},
Save the file and on terminal, simply write-
$ npm start

References:

Mr. Patrick Schroen for using concurrently.

Video tutorial

Get the full package here

SASS STARTER PACK