Compile SASS files into one CSS file | Grunt JS Tutorial

Posted by robert | Filed under JavaScript

In this tutorial I will show you how to compile sass files into a single css file. The technique is great for working in teams where others may not have an EDI that supports compiling sass files.

Install Ruby and Sass

First thing we need to is get Ruby and Sass installed on our computer. If you are using a Mac you do not need to install Ruby. For my Windows computer I used http://rubyinstaller.org/ to install Ruby. Be sure to check the “Add Ruby executables to your Path” checkbox.

To install Sass on Windows open the Command Prompt and type:

gem install sass

To install Sass on your Mac open Terminal and type:

sudo gem install sass

You should see the following after Sass is successfully installed.

Fetching: sass-3.2.7.gem (100%)
Successfully installed sass-3.2.7
Parsing documentation for sass-3.2.7
Installing ri documentation for sass-3.2.7
Done installing documentation for sass (18 sec).
1 gem installed

Grunt JS Setup

If you have never used GruntJS before you will need to checkout my Install Grunt JS on a Mac Tutorial or Install Grunt JS on Windows Tutorial.

Now download the example files below and navigate with Terminal or the Command Prompt to the “_build” folder and type in:

npm install

On a Mac you may need to type:

sudo npm install

Compiling Sass into CSS

Now that we have the Grunt JS packages added to our “_build/node_modules/” folder we can start converting sass into css. Check out the “Gruntfile.js” and you will see:

sass: {
    dist: {
        files: {
            '<%= meta.deployPath %>main.css': '<%= meta.srcPath %>main.scss'
        }
    }
}

That’s the magic where it will take your main.scss and all the @import’s and compile it into one css file. Now all we have to do is type the command below:

grunt

This works because in our “Gruntfile.js” file we have default Grunt JS task setup to use “sass”:

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

SASS Watch Command

Lets make this better by any time a sass file is edited or added Grunt JS will compile the files into css. Take a look at the “package.json” file in our “_build” folder. It should look like this:

{
  "name": "Test-SASS-To-CSS",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-sass": "*"
  }
}

Now add [“grunt-contrib-watch”: “*”] to devDependencies. Yours should look like this now:

{
    "name": "Test-SASS-To-CSS",
    "version": "0.1.0",
    "devDependencies": {
        "grunt": "~0.4.1",
        "grunt-contrib-sass": "*",
        "grunt-contrib-watch": "*"
    }
}

Type the below command to install the watch task packager to your local “_build” folder.

npm install

Ok, trust me we are almost done. Once you do this for one project. Setting up another project will be faster. Now we need to add the below code to the “Gruntfile.js” file.

watch: {
    scripts: {
        files: [
            '<%= meta.srcPath %>/**/*.scss'
        ],
        tasks: ['sass']
    }
}

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

Your “Gruntfile.js” file should look like this now:

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({

        //Read the package.json (optional)
        pkg: grunt.file.readJSON('package.json'),

        // Metadata.
        meta: {
            basePath: '../',
            srcPath: '../assets/sass/',
            deployPath: '../assets/css/'
        },

        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
                '* Copyright (c) <%= grunt.template.today("yyyy") %> ',

        // Task configuration.
        sass: {
            dist: {
                files: {
                    '<%= meta.deployPath %>main.css': '<%= meta.srcPath %>main.scss'
                }
            }
        },

        watch: {
            scripts: {
                files: [
                    '<%= meta.srcPath %>/**/*.scss'
                ],
                tasks: ['sass']
            }
        }

    });

    // These plugins provide necessary tasks.
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // Default task.
    grunt.registerTask('default', ['sass']);

};

To start the watch command we need to type:

grunt watch

Not sure if that was painful for you but for me creating this tutorial was. It seems like a lot of steps but after you use Grunt JS a couple of times you will see the benefit.

Comments (5) | April 11th, 2013

5 Responses to “Compile SASS files into one CSS file | Grunt JS Tutorial”

  1. Doug Johnston Says:
    December 19, 2013 at 1:22 pm

    Thanks for the tutorial, this made setup of grunt and sass dead simple!

    Reply
  2. Jamie Graham Says:
    January 20, 2014 at 10:13 pm

    You’re right, after setting up the gruntjs file once or twice it becomes very quick to set up. Thanks for the tutorial.

    Reply
  3. Krunal Shah Says:
    February 5, 2015 at 3:24 am

    simple. concise. precise.

    Thanks Robert for such a wonderful article. It saves my day.

    Reply
  4. nihal Says:
    July 21, 2016 at 4:57 am

    thanks a lot. :)

    Reply
  5. Ryan Says:
    June 8, 2017 at 10:16 am

    I was unable to get my Sass files to watch and recompile upon changes, this was the one example I FINALLY ran across that worked! You have changed the entire process of our Web Development team here and I want to thank you.

    Reply

Leave a Reply