How I set up SASS and Grunt

/ #Misc

SASS is a CSS tool that makes it possible to set variables and much more. Grunt is used to compile the SASS to CSS.

Installing Grunt

We need to install a package called Grunt. This is used to compile SASS and many other things. This tutorial is all about SASS, so that's what we're going to focus on.

Create a new file called package.json and add the following content.

  "name": "codewithstein",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-sass": "^1.0.0",
    "grunt-contrib-watch": "^1.0.0"

Now, you can open a terminal and type the following command to install Grunt:

npm install

Everything we need should now be installed.

Creating a Gruntfile

A Gruntfile is where we describe what we want to compile and how. Create a new file called Gruntfile.js in the same folder as the package.json and add the following content:

module.exports = function(grunt) {
       sass: {
           dist: {
               options: {
                   style: 'compressed',
               files: {
                   'main.css': 'main.scss'
       watch: {
           sass: {
               files: ['*.scss'],
               tasks: ['sass:dist']


   grunt.registerTask('default', ['sass:dist']);

Creating a SASS file

The last thing we need to do now is to create a SASS file. Create a new file called main.scss and add the following content.

body {
  background: black;
  color: white;


If you go back to the terminal now and type "grunt" and hit enter. You will get a message that the compilation is finished.

You can now check the contents of the "main.css" file. And voila, the SASS has been converted to CSS :-)


No comments yet...

Add comment


Please log in to comment!


Subscribe to my weekly newsletter. One time per week I will send you a short summary of the tutorials I have posted in the past week.