Add Compass to your Grunt task

A while back I started adding Grunt to my workflow. I also started to work with Sass and I wrote a quick post about Getting started with Grunt and Sass. I started using Grunt after hearing so much about it from the jQueryTO conference. At that point it was fairly well known to many, but quite new to me! I fell in love. And since I have been getting into Sass more I decided it was time to start using Compass. So lets take a quick look at getting that going with Grunt.

If you have not set up Grunt or Sass before, check out my old article on it, Here. Once you have that running you need to make sure that you have compass installed as well. Running gem install compass will get you going. Now I noticed that at first it would not allow me to install this gem since I lacked permissions. Now I don’t know a terrible amount about the bash, but I know that running sudo gem install compass allowed me to do it. I have heard that sudo is bad for security, I know little of this so use at your own risk? *I do plan on looking very much into it though, check back later and lets figure it out!*

The only real difference you need to be a aware of is that instead of adding the grunt-contrib-sass task you add grunt-contrib-compass, there is no need to add the Sass task and Compass will take care of all of that for you.

module.exports = function(grunt) {
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		compass: {
			dist: {
				options: {
					sassDir: 'sass',
					cssDir: 'css'
				}
			}
		},
		watch: {
			css: {
				files: '**/*.scss',
				tasks: ['compass']
			}
		}
	});
	grunt.loadNpmTasks('grunt-contrib-compass');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.registerTask('default',['watch']);
}

Instead of specifying the sass files like we did before, we just set up the sass directory and the css directory. My workflow is usually to have a few partial files that I import into a single style.scss file in the sass directory, that way Compass will only compile that single file into a style.css into the css directory. Boom. A subtle change from my original article, but now you are open to so much power!

Enjoy.