Hey folks!

As you likely know, we offer a bunch of preprocessor options at CodePen. Not only can you pick different preprocessor languages, but you can use some add-ons for those preprocessors. For example, you could use SCSS for CSS preprocessing, and add the Neat grid framework.

Historically, when new versions of preprocessors or add-ons came out, we just upgraded to them. We always checked it out to make sure upgrading wasn’t going to be too painful (no major breaking changes). So far so good. We’ve stayed up to date on everything and (we hope) didn’t cause too much grief.

For the first time in CodePen history, a situation came along where that wasn’t going to be possible. And it all sorta happened at once!

The gang over at Thoughtbot released Neat 2, which is has 100% breaking changes to the previous version (1.8). No shame there of course! That’s what major version changes are for. They also have a 5.0.0.beta.7 version of Bourbon, which deprecates a ton of features.

If we were to just upgrade the Gems1 for these Sass add-ons, we’d break 100% of Pens using @import "neat" and the vast majority of Pens using @import "bourbon". Not good.

So, we had to invent a new syntax that would allow for the versioning of add-ons like this. This is what is available now:

/* Locked at version 4.3.1 */
@import "bourbon";

/* At version 5.0.0.beta.7 right now, but will upgrade to any 5.* release */
@import "bourbon@5.*";

/* Locked at version 1.8.0 */
@import "neat";

/* At version 2.0.0 right now, but will upgrade to any 2.* release */
@import "neat@2.*";

/* Locked at version 2.1.1 */
@import "modular-scale";

/* At version 3.0.0 right now, but will upgrade to any 3.* release */
/* Note the dash removal... but will worth with or without. */
@import "modularscale@3.*";

You can’t (yet) go back in time and use Bourbon 2 or anything like that. But, this gives us a system that we can do stuff like that if there is demand for it, in addition, to handle any other breaking add-on releases in the future.

See this working with Neat 2:

See the Pen Neat 2.0 Grid! by Chris Coyier (@chriscoyier) on CodePen.

It just so happened that Modular Scale 3 came out, also with 100% breaking changes, so that’s using this same system:

See the Pen Modular Scale 3! by Chris Coyier (@chriscoyier) on CodePen.


1 Indeed, we’re Ruby processing your Sass still. That will be a whole thing when Ruby stops being the canonical Sass.