Lightning fast Sass compiling with libsass, Node-sass and Grunt-sass

| 32 replies | Short URL: http://benfra.in/20o

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 and follow steps 1 and 2. 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.12.1"
	}
}

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: {
				sourceComments: 'map',
				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

32 Responses to “Lightning fast Sass compiling with libsass, Node-sass and Grunt-sass”

  1. Luis Martins

    A word of caution. Libsass is yet not in feature parity with the ruby version. That being said, not only I’m very confident that will be the case in short time, the time you gain on each and every save will keep you amazed. Personally, can’t go back to ruby based compilers. If you work with sass, you owe to yourself trying this.
    There’s also simpler tools that also support libsass, from the top of my head, you can try Mixture or ask the usetakana.com guys to be part of the beta and experiment REAL time compilation on your sass projects.

  2. Ben Frain

    Not at present. My understanding is that Compass has a lot of Ruby dependency and as libsass does away with Ruby it adds significant complexity to porting it across.

  3. Peter O'Shaughnessy

    The Ruby version is so slow, it’s a real drag.

    I’m having problems with this one too, though: a bug that looks like it it’s been fixed for months in libsass, but it’s still not working in the latest grunt-sass (https://github.com/hcatlin/libsass/issues/72)…

    “Note that node-sass is currently under heavy development and might be unstable, there are also some stuff missing, like a compression option. Check out grunt-contrib-sass (based on Ruby Sass) if you want something stable that also supports the old syntax, but in turn much slower.” (https://github.com/sindresorhus/grunt-sass)

    But I’m definitely going to keep an eye on this – I’d love to rip out the Ruby one and use this one, as soon as I can!

  4. Ben Frain

    Yes, it’s probably related to this too: https://github.com/hcatlin/libsass/issues/151

    That has been less of a problem for me, @extend’ing %placeholder styles and the like has been more of an issue. Once that’s done I’ll happily make the switch on every project. Used this on the redesign of this site though and it made CSS tweaks so easy and satisfying.

  5. Dan Voyce

    I live for Sourcemaps. Big bummer these aren’t supported yet!

  6. David

    Great article, but just wanted to correct a small typo: “you’re” at the beginning of the second paragraph should be “your”.

  7. alpipego

    Thank you for the brief introduction, foundation 5 finally forced me into using libsass.
    Could you estimate what you mean by “lightning fast”? I know that it is hard to compare different sass projects but honestly I haven’t realized that much of a speed improvement.
    I have a project foundation 5 project right now (no @extends) that takes almost 7 seconds to compile?! Any ideas?

  8. Ben Frain

    You have guess you have something wrong there. I really do mean ‘lightning’ fast. Literally fractions of a second to compile. I imagine something is wrong if it’s taking more than a second.

  9. Envirra

    I’m tested with an empty scss file. It’s 1 second to compile. Is there some thing wrong? (I’m running on windows 8.0)

  10. Envirra

    I’m trying with a clean grunt project by following your steps, still take 0.9 second to compile (measured by grunt-watch). I’m not sure is there some issue related to windows. Thanks for good article :)

  11. alpipego

    Thanks for the quick answer. Since it is a foundation project I have that as a dependency in my project as well… besides from that I pretty much use grunt in the way described here.
    Maybe it is a Windows Problem as Envirra pointed out…?

  12. Catlyn

    It all seems to work until the “grunt” command (i’m on Win x64), when it says this:
    Running “sass:dist” (sass) task
    Warning: source string:1: error: invalid top-level expression
    Use –force to continue.

    Thanks for any solution/idea!

  13. Ben Frain

    It’s telling you there’s an error in your sass:dist task so I would check the paths and file names you have set there in your Gruntfile.js.

  14. alpipego

    Finally I got to test it without the whole foundation stuff and yeah… it is lightning fast. Thanks again.

  15. Vincent Chan

    Seems like grunt-sass still doesn’t support Compass yet. Any insight? Thanks!

  16. Umer

    What do you mean by run grunt ?
    I tried grunt in command prompt and entered but nothing happened

  17. Umer

    some thing is still wrong, maybe the watch is not working. when i run grunt it compiles but then shows watching and when ever i change scss file and save, it does’nt compiles. I cntrl+c to stop watch and run grunt again. then it compiles but again stucks at watch

  18. thepushman

    Umer, I have the exact same problem. It was working brilliantly earlier tonight, not sure what changed. I’m baffled. I know I updated sass to sass rc5, but things were working fine after that.

    It notices changes to the Gruntfile.js

  19. thepushman

    I figured out the problem, geez.

    I had changed the folder in which my .scss file was in, and only updated the gruntfile with the new directory under the sass options. Needed to add the new directory under the watch files options as well. Duh.

  20. Marius

    Hi guys,
    I think I managed to get compass working with libsass by installing compass as a bower package: “bower install compass-mixins” in the project’s directory and then adding the path in the options includePaths, in Gruntfile.js , in the sass task, like:
    sass: {
    options: {
    includePaths: ['bower_components/compass-mixins/lib']
    },
    dist: {
    options: {
    outputStyle: ‘expanded’
    },
    files: {
    ‘css/app.css’: ‘scss/app.scss’
    }
    }
    }

    Obviously, I also did @import “compass”, in .scss base file.
    It seems like it’s working, the only downside is that I’m not sure how up-to-date is that compass-mixins repository (https://github.com/Igosuki/compass-mixins/tree/master/lib).

    I’m a newbie to Grunt and Bower, not sure this is a good solution, so let me know what you think.

  21. Callum

    Love the guide and got this working locally pretty quick, the problem is most of the functionality in SASS 3.2+ (most notably @each and %placeholder) don’t compile with grunt-sass / libsass as yet.

    Hopefully they work it out as this is so much faster than the compass method

  22. Johan van Tongeren

    I am using Foundation5 (with some custom SCSS) and it took an average 3.5 seconds compiling everything in the Ruby compiler. After we switched to Libsass it only takes an avaerage 167ms to compile the same project. Awesome!!

  23. Tim Gummer

    Very helpful thanks – for a designer who has struggled with RVM and totally new to Grunt. As source maps now seem to be supported in lib sass – could you update on how to to make use of them? (Borrowing syntax from the ruby sass grunt implementation doesn’t seem to get me there).

Leave a Reply

Notify me of followup comments via e-mail. You can also subscribe without commenting.

237Days
237 days since this post was last revised. Specific details have probably changed.
502 words
MENU