How I set up SASS and Grunt

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) {
   grunt.initConfig({
       sass: {
           dist: {
               options: {
                   style: 'compressed',
               },
               files: {
                   'main.css': 'main.scss'
               }
           },
       },
       watch: {
           sass: {
               files: ['*.scss'],
               tasks: ['sass:dist']
           }
       }
   });

   grunt.loadNpmTasks('grunt-contrib-sass');
   grunt.loadNpmTasks('grunt-contrib-watch');

   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;
}

Compiling

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 :-)