It’s been a while now since the Sass team has declared DartSass as the canonical Sass and has essentially deprecated all other versions of Sass. One nice thing about this is that DartSass is entirely backward compatible with any older Sass. So when we flipped over to DartSass in the Pen Editor, there were no problems.
DartSass was a satisfying change in the Pen Editor because it solved some bugs that tripped up a lot of users. For example, the min() and max() functions would throw an “incompatible units” error, because Sass itself has functions also named these exact same things, and, for example, max(10px, 1vw) can’t be compiled ahead of time. That’s fixed in DartSass.
Note that if you have really old Pens that still use Compass (e.g. @import "compass/css3";) — we’ll still route that Sass processing to an old version of Ruby Sass that still supports Compass.
When I say “no problems” with the conversion, there really weren’t, for users. It was still a pretty complex journey for us. I think the biggest hurdle was making sure all of the add-ons for Sass still worked properly. For example, the JavaScript API has an option called includePaths when you call the render function. The purpose of that is to provide paths for Sass to look for imports should it need to. So we should be able to provide it paths to copies of all of those Sass add-ons and it will support them. But we just couldn’t get that to work for the lives of us, so our processor code uses the much more complex importer function which thankfully we were able to get to work. There are other little rough edges, but overall DartSass is the fastest and smoothest Sass processing we’ve had in ages.
More recently, we switched Projects over to DartSass as well. Again, no real trouble. DartSass is arguably even more useful in Projects because it unlocks the @use syntax, which is the modern/better/safer/more capable version of imports:
If there is ever any processor you’d like to see added or upgraded on CodePen, feel free to let us know.
The post DartSass Everywhere appeared first on CodePen Blog.