Add Compass to your Grunt task

October 30th, 2013

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) {
		pkg: grunt.file.readJSON('package.json'),
		compass: {
			dist: {
				options: {
					sassDir: 'sass',
					cssDir: 'css'
		watch: {
			css: {
				files: '**/*.scss',
				tasks: ['compass']

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!


Warning: count(): Parameter must be an array or an object that implements Countable in /home/ryanch6/public_html/wp-includes/class-wp-comment-query.php on line 405
  • Pingback: Getting started with Grunt and Sass - Ryan Christiani | Front-End Dev()

  • Michael Fasani

    Hey, Cheers for sharing. Saved me some time 🙂

    • Ryan Christiani

      Glad it helped!

  • Charlotte Wilson

    Thanks for sharing!

  • Geoff

    Great tutorials! thanks

  • Patrick W

    Thanks a lot, a lot simpler than the documentation on github!

  • Kenny Fraser

    Thanks, very useful.

  • Dave Kanter

    I don’t know if you’ve looked into it yet but the “using sudo is dangerous” mantra is a little misleading. Basically if you are a superuser in a networked system you shouldn’t run around “su” or “sudo”ing as a root user as you could do some serious damage and potentially create security problems for yourself and your network. But if it’s just you and your Macbook and you’re not on the Wifi at Starbucks, don’t worry about it. Just be careful you don’t blithely sudo uninstall something and you should be OK.

    • rchristiani

      Hey Dave!

      I have actually. But I had not updated/written anything about it. I was always confused by that “using sudo is dangerous” stuff as well. I now know it is not always that case.

      Thanks for bringing that up again! I had sort of forgot about that.

      • declanqian

        In this case, it nothing. You are using system ruby’s gem which need sudo. I am a Java Developer who now trying to find a solution to organize my web project. Good article, by the way.

    • Brian Chandler

      I agree. This is one of those scenarios one cannot technically say sudo is not dangerous, but it’s really safe in relation to why it was even so useful in the first place. The original mantra was “running as root is dangerous”, and is still well justified. It lacks a stopgap for predictable human error. The reason I say it’s technically not dangerous is because you use sudo to execute privileged commands, but that can be very situational as to when that’s dangerous. ‘sudo apt-fast install’ is likely not going to tank the system. ‘sudo rm -rf /dev’ likely will. Sudo can also be used to run a command as someone other than root, like when dealing with scripts, but again, the danger is situational.

      • Brian Chandler

        Oh, forgot to mention. Sudo is good for security when allowing a co-worker privileges to certain commands/scripts, while not allowing others. A good example would be allowing them to only run database maintenance/backup scripts, but nothing that could start or stop the daemon directly.

    • Peter Gerdes

      Because we all know how dangerous: sudo get me a bigmac can be 😉

      I do think there is a bit of value in the sudo is dangerous meme. Everyone I’ve ever met who has known enough not they can fix permission screwups they create and not fuck up important system files is confident enough to ignore the meme (even this author just added it because he wanted to encourage best practices not because he personally was reluctant). On the other hand there are a lot of people whose knowledge of unix/shells is limited to things they’ve copied from webpages when they want to install something or adjust some weird setting. To them (as it was to me when I first used linux) sudo is a magic spell that whips recalcitrant commands into line.

      I’ll admit, however, this is probably better conveyed as “sudo is powerful and can ruin your system if you aren’t careful”

      • Dave Kanter

        Agree 100%.

  • Chris

    Hey guys, if i wanted to add a compass compile option too, how would i go about that?

  • Websiterox

    Nice Tutorial for beginners.Thanks for it.
    Functions in CSS By Using SASS

  • John Defahl

    Is there any need for the Compass config.rb files now since you declare everything in the new Grunt config?

    • rchristiani

      Hey, no as far as I know there is no need for that. I do not use ruby and have no config.rb file. The Grunt/npm are handling that.

  • Simon Dingley

    Really useful article thanks! One thing I want to be able to do is have dev and production tasks but for production to output filenames with “.min” in the filename e.g. dev outputs screen.css and production task outputs screen.min.css – is this possible without explcitily declaring every source and target file?