5 steps to SetUp SASS with Grunt and NodeJS for Beginners
Tags: beginners, tutorial, node, grunt
Published: 2018-04-20 16:56:14

---
title: 5 steps to SetUp SASS with Grunt and NodeJS for Beginners
published: true
tags: beginner,tutorial,node,grunt
canonical_url: https://medium.com/small-things/5-steps-to-setup-sass-with-grunt-and-nodejs-for-beginners-e6d7512fcb7b
---

![](https://cdn-images-1.medium.com/max/1024/1*WXViiNWw1Eg55USSFFGJAA.png)


This tutorial covers,

✅ Setting Up NodeJS with Express

✅ Installing SASS

✅ Setting up Watch task with Grunt

🎉 Done..!!

### Step-1 — Installing NodeJS

![](https://cdn-images-1.medium.com/max/600/1*FnNMOC7TImY0wP68rfIksQ.png)

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/](https://nodejs.org/en/download/)

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

### Step-2 — Installing Express

![](https://cdn-images-1.medium.com/max/465/1*B8RdqA2khkEZTtQbf02bog.png)

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.**

![](https://cdn-images-1.medium.com/max/338/1*BSXX9ndV-ptPVu-SwmMGIw.png)<figcaption>your folder structure will look similar to this</figcaption>

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

![](https://cdn-images-1.medium.com/max/600/1*T8QrANjTy4fGDIWTHXPfcQ.png)

**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/](http://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](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

![](https://cdn-images-1.medium.com/max/570/1*Q-nvSptL2r41MFtr8kaAnw.png)

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

![](https://cdn-images-1.medium.com/max/1024/1*_QF5h3HmZofG5xDRVl5hOg.png)

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

![](https://cdn-images-1.medium.com/max/363/1*jucHKDJDDAh17xODPaL4_Q.png)

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.

![](https://cdn-images-1.medium.com/max/1024/1*Dyk56vIfclCu04iOl0jKUw.png)<figcaption>Final Output</figcaption>

#### Awesome Isn’t it?

if you want you can find the source code [here](https://github.com/SarathSantoshDamaraju/sass-npm-grunt-ENV).

> 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.

* * *