/ Geeky techie

How to Setup a SASS Project with or without Gulp


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 -


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

npm install bootstrap

Your project structure should be like-


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


Mr. Patrick Schroen for using concurrently.

Video tutorial

Get the full package here


Shopnil Mahmud

Shopnil Mahmud

A software engineer with avid interest on any form of arts and philosophy. Likes to write codes for a living and poetry for the soul. Currently residing in Toronto, originally from Bangladesh.

Read More