Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

You can use these on CodePen now! Technically: Sass 3.3.0.rc.4 and Compass 1.0.0.alpha.17.

Sass 3.3 has been a long time coming. I publicly promised we’d upgrade to it by the beginning of February even if it’s still not stable, so here we are. We pushed it out about a week ago and there hasn’t been any major issues it seems, so rock’n’roll.

Our policy here on CodePen is that we run the latest stable version of everything. Even if that means breaking old Pens because of non-backwards-compatible new versions of things. I just say that to be clear about the policy. I wouldn’t worry about it too much. There have never been any major upgrade issues.

There are breaking changes in Sass 3.3 though. You can view a complete list here. Mostly obscure stuff it seems.

Just for a taste, here’s some buttons Hugo Darby-Brown did that make use of some Sass 3.3 goodness:

See the Pen Social Buttons Using Sass Maps by Hugo Darby-Brown (@hugo) on CodePen.

What’s new?

Here’s some reading and stuff to persue:

Deprecating our random()

Sass 3.3 has it’s own random() function, so we’ll use that and deprecate the one we added to older Sass.