Sass used to be a Ruby thing, but it’s been quite a while now since the Sass team has moved off Ruby to Dart, deprecating the Ruby version entirely in 2019. In fact if you npm install sass, you’ll get the DartSass version. It’s taken us a while, but now CodePen is on DartSass too.

The backstory here is that we got excited about getting Sass off Ruby too soon. Years ago now. At one point we tried to switch to NodeSass, which used LibSass (a C++ version of Sass) under the hood. But it was not a good scene. There were a variety of incompatibilities with between NodeSass and RubySass, and because there are literally hundreds of thousands of Sass Pens on CodePen and no way to explicitly pick which Sass processing those Pens use, that caused so many bugs we had to switch back to RubySass.

Fast forward to now, DartSass is entirely compatible with old RubySass, so this switchover should be safe. Hopefully entirely painless (so far so good).

The best part here is that no only will everything continue to work as you expect, but it will be faster. And more importantly, be up to date! DartSass supports things you would expect to work that just didn’t in RubySass. For example, a line like this would fail in RubySass:

div {
  width: min(50%, 500px);
}

RubySass would complain about mixed units, but this is entirely valid in CSS. DartSass now just leaves this alone, as it should, which means (trumpets) less confused users and support tickets for us.

Another tricky thing for us is that we support the (ancient!) Compass for Sass. That only works with RubySass, and we can’t just break those Pens. So, our system detects if you are trying import Compass and routes it to RubySass processor that we’ll continue to support.

It’ll be easy for us to keep Sass updated from here on out, like we do with all the other processors. That’s nice as DartSass actually ships new features, so we can make sure you have them. Speaking of other processors TypeScript is now upgraded to 4.x, and pretty much all the processors used (both in Pens and Projects) have been updated to the latest versions very recently.