Image for post
Image for post

5 steps to SetUp SASS with Grunt and NodeJS for Beginners

📣 👋 Hello, everyone! welcome to the very first tutorial of ‘Small things’. You can find all the basic programming and related, posted here every week. No Bullshit and Long texts !!

Krishna Damaraju
Jun 25, 2017 · 5 min read
Image for post
Image for post

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.

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

Step-2 — Installing Express

Image for post
Image for post

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

Image for post
Image for post
your folder structure will look similar to this

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

Image for post
Image for post

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

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

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

Image for post
Image for post

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) {
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']

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

Image for post
Image for post

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

Image for post
Image for post

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,

padding: 50px
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
background-color: floralwhite
text-align: center

margin: auto
color: cadetblue
text-decoration: overline
color: #333
font-size: 20px

and see the changes in your browser.

Image for post
Image for post
Final Output

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.

Small Things

Coding tips for beginners

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store