245Days

245 days since this post was last revised. Specific details have probably changed.

The bigger the Sass project you work on, the slower compilation of your Sass project can become. That's because ordinarily Sass is Ruby based and there's never been a way around that. Until now.

If you are interested in Libsass, you might be interested to read another post about migrating a code base from a Ruby based Sass compiler to Libsass? If so, take a look at ‘Is Libsass, the lightning fast Sass compiler ready for prime time?

If your Sass compile is starting to feel too long, consider using Libsass. The projects creators, Aaron Leung and Hampton Catlin (yes, the original Sass creator) describe it on the libsass Github page like this:

Libsass is a C/C++ port of the Sass CSS precompiler. The original version was written in Ruby, but this version is meant for efficiency and portability

Now, I'd read an interesting post on how to get this going here: http://www.damln.com/log/sassc-and-bourbon-it-works/ but it was a little too involved for my liking.

However, as luck would have it, there's a Node 'wrapper' version. Andrew Nesbitt describes his fine work on the project page of Node-sass thus:

Node-sass is a library that provides binding for Node.js to libsass, the C version of the popular stylesheet preprocessor, Sass.

It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.

When he says 'incredible speed' he's not lying! However, I’m no wizard with Node so I wanted an even easier way to get up and running. Enter the grunt-sass plugin for Grunt (not to be confused with grunt-contrib-sass which is the 'normal' Ruby based version).

Using the grunt-sass plugin provides a simpler way to use libsass and enjoy the incredible Sass compilation speeds it offers. First, a warning:

Now, let's get on with how you can use this with Grunt. First of all, if you have never used Grunt, take a look at this post. Done that? Great.

Now, here's what you want to be pasting into your package.json file:


{
  "name": "Your Project Name",
	"version": "0.0.1",
	"devDependencies": {
		"grunt": "0.4.5",
		"grunt-contrib-watch": "~0.6.1",
		"grunt-sass": "^0.16.0"
	}
}

And here's what you want to paste into your Gruntfile.js:


module.exports = function(grunt) {
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		watch: {
			sass: {
				files: ['sass/**/*.{scss,sass}','sass/_partials/**/*.{scss,sass}'],
				tasks: ['sass:dist']
			},
			livereload: {
				files: ['*.html', '*.php', 'js/**/*.{js,json}', 'css/*.css','img/**/*.{png,jpg,jpeg,gif,webp,svg}'],
				options: {
					livereload: true
				}
			}
		},
		sass: {
			options: {
				sourceMap: true,
				outputStyle: 'compressed'
			},
			dist: {
				files: {
					'css/styles.css': 'sass/styles.scss'
				}
			}
		}
	});
	grunt.registerTask('default', ['sass:dist', 'watch']);
	grunt.loadNpmTasks('grunt-sass');
	grunt.loadNpmTasks('grunt-contrib-watch');
};

I've kept Grunt contrib-watch in there so you get the joy of LiveReload if you install the relevant browser extension. You’ll also need to amend the name of your styles if you call the file something different.

You should also note the two options in there: sourceComments and outputStyle. I’ve opted for a compressed output style and source maps generation. You can amend the output to a more development friendly expanded and comment out the sourceComments if you don’t need them.

Now, in the root of your project, from Terminal run [sudo] npm install and once npm has worked its magic and your back at the command line, run grunt

Now, change a Sass file and don't blink!!

About The Author

Ben Frain is front-end web developer and author based in Cheshire, UK.
His books, 'Responsive web design with HTML5 & CSS3' and 'Sass and Compass for Designers' are available now.
You can follow him on Twitter @benfrain.