Haml/Sass 3 Released

Posted May 10, 2010

Haml and Sass version 3 have been released. You can install them now:

gem install haml

After nine months of development and one more of betas and release candidates, the latest and greatest Haml and Sass versions are finally ready for action.

A lot of exciting stuff has happened since v2.2. If you’ve been reading this blog you’ll know about most of it, and you can find the full rundown in the Haml changelog and the Sass changelog. However, I’ll go over the most exciting features right now.

Sass

The majority of the work this release went into Sass, since it’s got more growing yet to do than Haml. This means that it has most of the exciting changes. Some of the biggest of these were to the syntax, and the biggest syntax change is that Sass 3 now supports a fully CSS-compatible syntax known as SCSS.

SCSS: Sassy CSS

I’ve gone over SCSS in great detail in the blog post introducing it, but here’s the quick rundown: it’s an extension of the CSS3 syntax, adding Sass’s features in a CSS-y way. In general, it tries to be as close to CSS as possible. The file extension is .scss and Sass files can be converted to SCSS using the new sass-convert tool as follows:

# Convert a single file to SCSS
sass-convert --from sass2 style.sass style.scss

# Convert all files to SCSS
sass-convert --from sass2 --to scss --recursive .

Since there’s been some confusion on this point, I want to emphasize that the indented syntax (or just “Sass”) is still supported and will continue to be supported. The two syntaxes are completely interoperable: Sass files can import SCSS files, and SCSS files can import Sass files.

Sass Syntax Changes

There have been some syntactic changes to Sass proper as well. Variables now use the $ character, and = is no longer necessary for declaring properties with variable values. All properties can now use variables, arithmetic, and functions. This has required some changes in how strings are handled, to the effect that you will only rarely need to add quotes. For more information, see the blog post on the syntax changes in Sass 3.

You can also use the new sass-convert tool to upgrade your old Sass 2 files to use the new syntax:

# Convert a single file to Sass 3
sass-convert --from sass2 --in-place style.sass

# Convert all files to Sass 3
sass-convert --from sass2 --to sass --in-place --recursive .

Selector Inheritance

The new @extend directive in Sass 3 allows one selector to inherit all the styles of another without duplicating the CSS properties. This is a very powerful tool for writing classes that share styles, especially when those classes are used in complex ways in the stylesheet and those complex uses need to be shared as well. For a more detailed explanation, check out the blog post on @extend.

Color Functions

Sass 3 comes with a whole bunch of new functions for manipulating colors, including HSL colors and those with alpha channels. It has functions to lighten, darken, saturate, desaturate, and adjust the hue of colors, a function to mix two colors together, and many others. For a more thorough introduction, read the blog post introducing the color manipulation functions.

Haml

Although Haml’s changes aren’t quite as sexy as Sass’s, it does have its fair share of cool new stuff.

Easier Multiline Ruby Functions

It’s now possible to stretch a Ruby function across multiple lines. Although normally Haml discourages the use of Ruby code in templates by making multiline code difficult, there are times when lots of Ruby makes sense. In particular, when a helper is being used for purely presentational purposes, it can belong in the template. Thus, any Ruby expression can now be broken across multiple lines wherever there’s a comma. For example:

= link_to_remote "Add to cart",
    :url => { :action => "add", :id => product.id },
    :update => { :success => "cart", :failure => "error" }

Custom Data Attributes

Haml now has built-in support for HTML5 custom data attributes. These attributes allow the website to pass data to the browser as HTML attributes of the form data-<name>. Haml now makes this even easier by allowing you to use a Hash for the :data attribute, which will get translated into custom data attributes. For example:

%div{:data => {:author_id => 123, :post_id => 234}}

Will compile to:

<div data-author_id='123' data-post_id='234'></div>

Where To Now?

In the most immediate future, along with dealing with the inevitable bug reports, I’m going to focus on adding support for the new Sass syntax to the Pygments syntax highligher that’s used on GitHub and to the Emacs modes that I maintain. I’ll probably also spend some time playing with new YARD features and integrating them with the docs.

After that period of minor relaxation, I’ll start to work splitting Haml and Sass apart. Yes, by the next release (version 3.2) the two languages will be packaged and released separately. I’ll write another blog post with more details about this later on, after Chris and I hash out all the details.

And what about the next release itself? Just as this release didn’t take as long as the last, I don’t want the next one to take as long as this. Of course, trying to come up with a release date now is nothing more than guesswork, but I’ll give it a go nonetheless. I’ll try to release the next versions of Haml and Sass by October 2010. Moreover, I’ll commit to releasing the next versions of Haml and Sass by December 2010. If November rolls around and it’s not released, the betas start then and there.

This should be achievable in large part because our plans for the next release are not nearly as grand as our plans for this one. There are various ideas and features - major, but not huge like @extend - that didn’t quite make it in to v3. The 3.2 release will likely contain a collection of those, and be something of a stepping stone to a potentially grander 3.4 release. Then again, who knows what time will bring?

Thanks

There are so many people who deserve thanks for this release, it’s hard to know where to begin. I’m sure I’ll leave deserving people out of this list, and if I miss you I’m terribly sorry. But I’ll give it a try anyway.

I want to thank Hampton Catlin twice. First for having the genius to bring Haml and Sass into existence in the first place. Second, though, and more importantly to me personally, for supporting and encouraging me when I was still wet behind the ears. Haml was the first open-source project that I contributed to, and it’s because of Hampton’s support when I did that I’ve come to love open-source and its community.

I also want to thank Chris Eppstein, my partner on the Sass core team. It was largely his vision of what Compass could be that, true to its name, has shown me what people need in a stylesheet language. He has worked tirelessly for Sass and Compass, and he’s kept me sane while we’ve been working on this release.

I’d also like to thank Alexis Sellier for creating Less. If Chris and Compass have shown me what people need in a stylesheet language, Alexis and Less have shown me what they want. Our goal with Sass 3 is to bring those two things together: the power and features needed for creating excellent stylesheets easily, combined with a syntax that’s built on a foundation everyone understands.

The last of the long-form thanks goes to my family and my girlfriend, Liz, for loving me, supporting me, and being tolerant of my long hours tapping away at my laptop.

Thanks to everyone who contributed code: Alf Mikula, Charles Roper, Daniel Neighman, Florian Frank, Jack Chen, Jan Ulbrich, Jared Grippe, Jason Whittle, John Reilly, Josh Peek, Karl Varga, Dr. Nic Williams, Norman Clarke, Ronen Barzel, S. Burkhard, Sam Pohlenz, Tav, thedarkone, and Tim Carey-Smith.

Thanks to everyone who helped me brainstorm at various times: Adam Brault, Bret Sepulveda, Daniel Neighman, Divya Manian, Eric Meyer, Elliot Cable Loren Segal, Michelle Shepardson, Dr. Nic Williams, and Shawn Allison.

Thanks to everyone who has donated to support Haml and Sass.

Finally, thanks to the entire Haml, Sass, and Compass communities. This release is, in the most literal sense, for you.

sdepold said May 10, 2010:

The changelog links are broken :(

Nathan said May 10, 2010:

Oops! They should be fixed now.

Dr Nic said May 10, 2010:

Congratulations guys. Haml 3 + Sass 3 will continue the awesomeness.

Geoff Garside said May 10, 2010:

Great work, I’m loving the new sexy that is SCSS

Wynn Netherland said May 10, 2010:

Great work, Nathan and team. Let’s keep innovating!

Tim said May 10, 2010:

Great stuff! Does anyone know of a textmate bundle for SCSS?

Si said May 10, 2010:

Cheers Nathan!

Olance said May 10, 2010:

I second Tim’s comment, it would be great to now have a Textmate bundle for SCSS!

Thanks for the great work on HAML/SASS!

Bryan said May 10, 2010:

Thank you for your hard work! :)

Nathan said May 10, 2010:

Charles Roper’s Sass tmbundle has support for some Sass 3 stuff, although not SCSS last I heard. If anyone writes such a bundle, please let me know, and I’ll put it up on the Sass editor plugin page.

iain said May 11, 2010:

Having used haml/sass from almost day 1, I am so excited! Haml/Sass should be nominated for the award of best gem since Rails! Many thanks to everybody who contributed!

John said May 11, 2010:

Thank you! Great job on your work.

Charles Roper said May 11, 2010:

Thank you Nathan! :D

Olance said May 13, 2010:

Hey Nathan,

the Sass tmbundle actually seems to do the job, at least for my own files =) My bundle wasn’t up to date and Textmate doesn’t use it as default because of another bundle I’ve got.

Thanks ! Olivier

David J. said May 19, 2010:

Love the tweaked syntax, and that I can require Sass and Haml separately. I didn’t realize things had changed so much until my test server started spitting out complaints about my variables.

Well done.

Tom C said May 24, 2010:

I hope the former SASS will live on, I much prefer the conciseness… SASS rocks!

Jeremy Carlson said June 02, 2010:

Nathan, if you could do me a favor, I would GREATLY appreciate it. I decided to do a small test drive on Sass 3 just to actually try it out. I’ve read about it and was really interested in what it can do. I wrote a post on my blog about it. Can you go there, read the post, and see what I’ve done? Any feedback would be awesome.

http://jc-designs.net/blog/2010/06/test-driving-sass-3-a-second-look-at-sass/

Thanks for the hard work on this too!

Nathan said June 03, 2010:

Jeremy: I’ve replied to that post.

Mark said July 04, 2010:

Hi Nathan,

I was wondering if there are any plugins to see Haml highlighted in Notepad++? I have been looking for quite a while and have found nothing. I don’t have a Mac so no Textmate!

Nathan said July 04, 2010:

All the editor plugins I know of are up on the Sass site.

Alexander Shamne said September 21, 2010:

Using Haml is awesome, thanks for html5 support, waiting for next release

Make your comments snazzy with Textile!