Auto-Compile Sass Files with Sass 3

Posted January 25, 2010

Update: After this post was written, Sass 2.4 was renumbered to Sass 3. The title and text have been updated accordingly.

One area we’re continually focusing on in Sass development is making it easier to use Sass without Ruby. Especially since Sass now supports Rack, Ruby frameworks have excellent support for Sass. But if you’re using it with another language, it hasn’t always been so smooth. That’s why we’re introducing the ability to auto-compile Sass files whenever they change using nothing more than the command-line interface.

This is the second post in my series on new features in the upcoming Sass 3. The first post described new powerful functions for manipulating colors. All these features are available right now in the haml-edge gem.

sass --watch

Most people who use Sass without Ruby use it through the sass tool. Eventually we’ll introduce a graphical interface for Sass, but until that happens we’re working on making the command-line tool as easy-to-use as possible. The --watch flag is a big part of that. Here’s an example:

sass --watch app/stylesheets:public/stylesheets

This watches all the Sass files in app/stylesheets. Whenever one of them changes, the corresponding CSS file in public/stylesheets is regenerated immediately. Moreover, any files that import the changed Sass file get regenerated as well.

You can also watch individual files, like so:

sass --watch screen.sass print.sass

Sass knows to produce screen.css and print.css. You can also specify the CSS file to produce, just like for directories:

sass --watch stupid-browser.sass:ie.css

sass --update

As a companion to --watch, we’ve added another new flag to the sass tool: --update. It works like --watch, except where watch sticks around and updates the CSS files whenever the Sass files change, --update only does it once. For example:

sass --update app/stylesheets:public/stylesheets

This will run through each Sass file in app/stylesheets and check if it’s been modified since the corresponding CSS file was generated. If so, the CSS file is regenerated; if not, sass goes on its merry way. Like --watch, it also takes imports into account.

The upshot is that sass --update will only update the CSS files that need updating. This makes it substantially faster than manually running sass over all the Sass files every time anything changes.

What This Means

sass --watch and sass --update are major steps forward in the use of Sass outside the Ruby community. Now anyone will be able to use Sass without needing an extra compile step between their editor and their browser.

This has been possible for a while with Compass, from which this feature comes. But now that it’s in Sass proper, it will be much more accessible. There are plenty of people using Sass without Compass, and --watch will hopefully make their lives much easier.

Use It Now

sass --watch is available in the master branch of the Sass repository right now. There are two options for using it. The easiest way is probably to install the haml-edge gem by running gem install haml-edge.

You can also install it as the haml gem by downloading it from GitHub and running rake install in the haml directory. If you do this, you’ll also need to install FSSM the same way.

Peter Cooper said January 25, 2010:

I missed this feature from Less so I came up with a script to do this already (though more generally it can run any command when any files change).

Awesome that “watch” ability is now being baked in, but I realized I might still stick with my script merely because I can add in the ability to reload the page in Safari to the command line too.. great when developing!

Maybe there’s room to add an extra switch that runs a user defined command after a successful rebuild? If that’s not particularly against the scope of the sass command line tool, I’d be willing to code and test it.

Nathan said January 27, 2010:

Peter: I think rather than building such an ability to the command-line utility itself, I think it might be better to just suggest in those cases that people use the Ruby watcher API to build their own scripts. The Ruby API has support for various callbacks, and it could support more if people want them.

ragingmon said January 28, 2010:

*newbie on sass

I tried gem install haml-edge in my cygwin, it says there is no --watch function, but it worked when getting it directly from git hub.

Thanks a lot guys! This feature is what I’m looking for.

Nathan said January 28, 2010:

ragingmon: What do you get when you run sass --version with the haml-edge gem?

ragingmon said January 29, 2010:

As far as I can remember. It’s the same with http://gemcutter.org/gems/haml-edge It’s > 2.3.100

Renato Carvalho said February 07, 2010:

Sounds great those new features. I always wanted it to use in non rails projects. I just commented about it in another post on this blog.

One guy did a graphical interface for LESS http://incident57.com/less/

I think it would be great have something like that.

Cheers

Nathan said February 07, 2010:

As I mentioned in the other post, we do have a graphical interface in planning. Since I’ve already got so much on my plate for Sass 3, it probably won’t get serious work until then, though.

Renato Carvalho said February 07, 2010:

Thanks Nathan. I can imagine how hard you guys were working to get Sass 3 done. BTW, If you guys need some help regarding the UI Design. I could help on that.

Cheers

sunil said July 25, 2011:

Slightly off topic, but wouldn’t it be cool a watching sass process updated the browser as soon as an .scss file was saved?

I haven’t figured out how to do it, but it’s possible to do with firefox and mozrepl. Mozrepl opens up firefox to allow you to pass input to it from the outside. It should be possible to create a script that would watch a css file for changes, and then reload the browser if the file changes.

Make your comments snazzy with Textile!