5 steps to SetUp SASS with Grunt and NodeJS for Beginners

This tutorial covers,

✅ Setting Up NodeJS with Express

✅ Installing SASS

✅ Setting up Watch task with Grunt

🎉 Done..!!

Step-1 — Installing NodeJS

Install NodeJS in your System. What is NodeJS ? — In simple words, JavaScript runs in your browser that means on the client side. With NodeJS, it can even run on the Server Side as well so that you can use JS instead of PHP or any Backend Language.

https://nodejs.org/en/download/

Download LTS version ( is 6.11.0, when am writing this post).

Step-2 — Installing Express

You must have a folder setup at a location for the next few steps. Go to the location you want to setup the Folder and open the terminal/command prompt ( shift + Right-Click in Windows , Right-click > services > Open Terminal at Folder in Mac ).

if you don’t see any option in Mac, head into System Preferences and select Keyboard > Shortcuts > Services and try to repeat the above step again.

In terminal, type -

npm install express-generator -g

express foldername

then go into the folder you just created in the above step with

cd foldername

and type

npm install

this will basically install all the required packages our app will need (you can find them in node_modules). You can add any packages to the app using npm.

You have completed setting up your server. You can test it by running

npm start

and open localhost:3000 in your browser.

Step-3 — Installing SASS

SASS — Syntactically Awesome StyleSheets is a CSS pre-compiler. which gives extra abilities like using variables, inheritance, mixins, nested rules etc.. to CSS. It is for the benefit of the developer and you SASS code will be finally converted into CSS.

SASS needs RUBY, if you don’t have RUBY, install it first from here

www.ruby-lang.org/en/documentation/installation/

and choose your OS type. If you are using windows click the below and download . exe file

https://rubyinstaller.org

Now, open the terminal and type

gem install sass

--or--

sudo gem install sass

(use if you get any permission(s) related error message, but I won't suggest this)

to install SASS. SASS is a RUBY gem, that’s why we are using gem instead of npm.

Step-4 — Installing Grunt and its Dependencies

Awesome, We have almost completed setting up. Let’s install Grunt and its dependencies now.

What is GruntJS? —

As a frontEnd developer, you may have to handle many tasks like

• Working on the Small Chunk of JS and CSS and joining them into a single file,
• Image optimisation
• Compressing CSS and JS minification
• Using CSS Preprocessors like SASS

and this list goes on. Grunt helps you in automating this tasks.

Type this in your terminal

npm install grunt

Create style.sass file in your /public/stylesheets/ and create a file gruntfile.js in your root directory and paste the following code and save it.

module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), express : { dev: { options: { script: 'app.js' } } }, sass: { dist: { files: { 'public/stylesheets/style.css' : 'public/stylesheets/style.sass' } } }, watch: { css: { files: '\*\*/\*.sass', tasks: ['sass'] } } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-express-server'); grunt.registerTask('dev',['express','sass','watch']); }

it might look complex, but it is very simple to understand. We are writing a function

• which reads the dependencies from package.json
• We are using grunt packages like SASS to convert the style.sass file at a location to style.css, watch to observe the file changes in SASS and run the SASS compilation task and express to run the server. and all these tasks are registered under dev (you can use any other name). so when you run

grunt dev

all the three tasks we mentioned above will run automatically. Similarly, you can also setup a minification task to automatically minify your CSS or JS, saving you lot of time.

• we have to install the required grunt packages for the three tasks discussed above. Run the following in your terminal

npm install grunt-contrib-sass && npm install grunt-contrib-watch && npm install grunt-express-server

We are installing all three packages at once using &&.

Well Done!! you have set up your Environment to use SASS with npm.

Step-5 — Writing Simple SASS code

let’s see how your webpage looks first, run this command in your terminal

grunt dev

and open localhost:3000, it must look similar to this

This is serving from index.jade file inside from views/ . open it and see the structure

It has only two components one < h1> and <p>. So let’s style them, open your style.sass file and style them. This is how my code looks like,

body padding: 50px font: 14px "Lucida Grande", Helvetica, Arial, sans-serif background-color: floralwhite text-align: center h1 margin: auto color: cadetblue text-decoration: overline

p color: #333 font-size: 20px

and see the changes in your browser.

Awesome Isn’t it?

if you want you can find the source code here.

Thanks for reading my post. I’d like to hear your thoughts in comments. If you like the article ,please click the💚 below so that more people may read it.