Haml/Sass 3 Beta Released!

Posted March 31, 2010

It’s done: I’ve released the first beta of Haml/Sass 3: Classy Cassidy. You can install it right now:

gem install haml --pre

This beta has a ton of functionality; more than I could possibly summarize here. I’ve put up sites to host the documentation, though, so feel free to read the Haml changelog and Sass changelog for full account.

There are certainly some features that I think are particularly worth pointing out. These warrant their own blog posts, though, one of which I’ll probably already have written by the time you read this. So I’ll avoid talking about the specifics for now and talk more about generalities.

There’s no question that version 3 is focused on Sass. Haml’s certainly had some love, but this release would without question have been version 2.4 if it hadn’t been for Sass. The reason for this is that Haml’s settled down. The language is basically done; there are still plenty of minor additions or tweaks in its future, but the time for revolutionary Haml change is over. Haml’s pretty good as it is.

Sass, on the other hand, is really just now starting to come into its own. With the recent proliferation of CSS compilers (Less, CSScaffold, and xCSS, to name a few), it’s become clear that Sass has hit on some powerful ideas. I’ve got more to say about that in a future blog post, but for now I’ll just say: we’ve just scratched the surface of what CSS compilers can (and should) do.

Because Sass has outgrown its purpose as a mere aesthetic alternative to CSS, and because it’s still the most feature-rich CSS compiler out there, it’s become increasingly clear that my promise to give Sass a CSS-superset syntax was wise. Sass is valuable, and its value doesn’t lie in its syntax, it lies in its power. The success of compilers like Less make it clear that people want CSS compatible syntax, and it doesn’t make sense to keep them from using Sass because it doesn’t have it.

So as of this beta release, Sass has a brand new CSS superset syntax.

I’m going to save the full overview of the syntax for a separate blog post later. For now you can read over the changelog and the new Sass reference, rewritten to use the CSS extension syntax. But here’s a very brief summary:

  • The new syntax is known as “SCSS”, for “Sassy CSS
  • SCSS was built from the ground up based on the CSS3 spec, and is 100% CSS3-compatible
  • SCSS can do anything Sass can do
  • SCSS files can import Sass files, and vice versa
  • This means you can use Compass with SCSS right now

Once again, if you want to give Haml/Sass 3 a spin:

gem install haml --pre

And please do check out the Haml and Sass changelogs!

Brandon Wright said March 31, 2010:

Awesome! I’m very excited about theses changes. Good work!

Jerod Santo said March 31, 2010:

Nathan-

Thanks for all the hard work you have put into Haml & Sass. They truly are wonderfully powerful tools.

I look forward to seeing the Sass revolution continue!

anon said March 31, 2010:

Too bad SCSS is a ripoff of LessCSS

John Philip Green said March 31, 2010:

Congrats on the release Nathan. I am a big fan. The changes to Sass sound very good—I didn’t know you were headed in that direction (a superset css syntax) but love it.

John

Charles said March 31, 2010:

@anon – too bad you haven’t actually tried both of them and discovered their differences.

Pete Forde said March 31, 2010:

Don’t feed the anon trolls, this is a time for celebration.

So proud, Nathan!

Andy said March 31, 2010:

@anon – too bad you’re just an anonymous coward.

Andy said March 31, 2010:

Congrats, Nathan!

Sass kicks ass!

And you may quote me on that. ;)

Anonymous said March 31, 2010:

Very, very cool.

Can SCSS be used within a Sass file?

Rick said March 31, 2010:

As someone who hasn’t been following dev. progress very closely, there’s a lot to digest. Personally, I’m happy to see SCSS incorporating some of the features and the CSS superset philosophy of LESS (and, to an extent, CSS DRYer did before that).

We used SASS at my last company, and I’ve chosen LESS for my current project. There are definitely shortcomings to LESS that I hope less.js will make up for, but SCSS is going to make the choice a lot harder for the next project.

Congrats on the release!

Nathan said March 31, 2010:

Anonymous: No, they can’t coexist in the same file. A Sass file can import an SCSS partial, though, and vice versa.

Ben Ellis said April 01, 2010:

Looking forward to trying it out. I’ve been enjoying using version 2.2. The features added in 3 are just what I was hoping for: CSS superset a la LESS, automatic conversion in the manner of Compass’ watch list, and easing the use of Sass as a standalone tool.

I think the CSS superset approach will go a long way towards encouraging people to try it out. Personally I like the similarity of syntax between HAML and SASS. I can copy and paste some nested structure from a HAML file into a SASS file, scoop out the content and replace with style instructions. But I see the value of compatibility with CSS syntax.

I took a look at LESS too, but what made me opt for SASS instead were two reasons:

1) (less important) I noticed on the LESS group discussion that it sometimes generates overly verbose CSS (if you pass something like “ID1, ID2, ID3” as a selector, it prints out a block of rules 3 times)

2) (more important, to me..) the Compass plugin, with ports of frameworks such as Blueprint, 960, YUI, rendered modular and semantically flexible as mixins. That’s a huge win. I haven’t seen anything similar for LESS. (I don’t want to just import the raw CSS from those frameworks, I want them pre-packaged as mixins and variables.) If a standard were to emerge for specifying CSS mixins and variables, it would be great in terms of allowing us to choose whichever tool we want (LESS, SASS, etc.) and providing a single format for porting existing CSS frameworks (Blueprint et al.).

Thanks for all your work making HAML and SASS. Much appreciated!

Karl said April 01, 2010:

Does this spell the demise for SASS?

I’m going to break from what seems to be the sentiment so far, and say that “I love SASS” and I don’t want it to go away. I’ve invest a year in using SASS, typically with Compass, and at this point become very comfortable using it. The brevity, indentation, notation, etc. has become second nature to me now. And as others have noted, it’s similarity to HAML makes switching between the two easy on the eyes (and brain).

SCSS is fine and I understand it’s direction and purpose. I would just hate to see SASS languish just because SCSS is the new kid on the block.

SCSS++ said April 01, 2010:

I had decided on lessCSS (despite being less powerful than SASS in both syntax and code generation) simply for the sake of designers. Now that I know SCSS exists even if its still is a little less intuitive for “them” than lessCSS, its close enough. Also, integrating the watch option was a genius choice, Great Work! Thanks.

Nathan said April 01, 2010:

Karl: No worries, the indented syntax won’t go away. We recognize that a lot of people – myself included – find it easier to read and write, and we intend to keep supporting it.

grimen said April 01, 2010:

Great, now I think I’ll go out and get wasted to celebrate that #puts no longer breaks Ruby! I don’t I think I got any thumbs down on HAML anymore. doing the happy dance =)

David Sutoyo said April 02, 2010:

This is an awesome update, I’m trying it out right now. You said SCSS should work with Compass, but I’m having hard time getting it to work. The imports don’t seem to be working like they’re supposed to…

Nathan said April 02, 2010:

David: What’s going wrong, exactly?

David Sutoyo said April 03, 2010:

Maybe I was doing it wrong, but I assumed I could import a .scss file inside a .sass file in order for Compass to compile it. I called @import “grid.scss”; and Compass left it exactly the way it was.

David Sutoyo said April 03, 2010:

Nathan: nevermind, turns out I was confusing my syntax. In Compass I should be using @import grid.scss without the quotes and semicolon. I’m loving SCSS. Keep up the good work!

Oh, by the way, would it be possible to incorporate Compass’ enumerate function into SCSS?

Nathan said April 03, 2010:

All the Compass functions should work with SCSS without modification.

Make your comments snazzy with Textile!