Or, how do pre-processors handle modern CSS (but you already clicked on the click-bait, sucker)

A lot of people have heard of "Native CSS Variables". But they're not actually called that. Their real name is "Custom Properties" and they are much more powerful than just a means to store a color or width variable. There is a "Web Platform Test" for them. I was curious how pre-processors (Sass, Less, Stylus) would fair against this test, since they were all designed before custom properties were planned.

The Test

So what does this so-called "Web Platform Test" look like? Pretty simple actually:

.test {
  --percentage: 25%;
  --number: 37;
  --length: 12em;
  --time: 75ms;
  --function: foo();
  --nested-function: foo(bar());
  --parentheses: ( );
  --braces: { };
  --brackets: [ ];
  --at-keyword-unknown: @foobar;
  --at-keyword-known: @media;
  --at-keyword-unknown-block: @foobar {};
  --at-keyword-known-block: @media {};
  --cdo-at-top-level: <!--;
  --cdc-at-top-level: -->;
  --semicolon-not-top-level: (;);
  --cdo-not-top-level: (<!--);
  --cdc-not-top-level: (-->);
}

All of that is valid CSS now, which comes with some pretty impressive stuff.

Now, let's meet our contestants!

Less - The forgotten ex-lover of Bootstrap, Star still fading 🌠

First up: Less. It's old, it's buggy, it's terrible. Everyday fewer and fewer people are using it; a fact I enjoy celebrating. Since it's own variable system is based on @varname: #F00 I'm not expecting it to fair well.

Let's see the results! 🥁

It dies on all of the following:

--at-keyword-unknown: @foobar;
--at-keyword-known: @media;
--at-keyword-unknown-block: @foobar {};
--at-keyword-known-block: @media {};

Stylus - She was hotter than the sun, she just wasn't that bright 🌞

Alright, alright, but what about Stylus! It's newer than the others. But hasn't ever really caught on. Similar to Sass, but with a looser syntax and much more foot-guns 🔫. It's newer and less restrictive, so maybe it can handle custom properties better.

To the results! 🥁

Stylus chokes and dies on these

--brackets: [ ];
--at-keyword-known: @media;
--at-keyword-known-block: @media {};
--cdo-at-top-level: <!--;
--cdc-at-top-level: -->;
--semicolon-not-top-level: (;);
--cdo-not-top-level: (<!--);
--cdc-not-top-level: (-->);

and even worse, it keeps on chuggin', silently outputting the wrong stuff for these:

--at-keyword-unknown: @foobar; /* --at-keyword-unknown: ; */
--at-keyword-unknown-block: @foobar {}; /* --at-keyword-unknown-block: {}; */

Sass - The foxy minx, that charmed developers the world over 🦊

Okay, but what about my beloved Sass.... It's older... still extremely popular. But with that popularity, does that also come stagnation? Does their stricter, beautiful design mean they can't cut it with the new stuff.... let's find out.

The results......
Sass passes every test 😮 🎉

Sass: 18/18 (on both LibSass and Dart-Sass)
Less: 14/18 (4 crashes)
Stylus: 8/18 (2 inaccurate outputs, 8 crashes)

Sass 😍

In conclusion:

I was surprised that Sass already accurately supported the modern CSS Custom Properties feature. I was also surprised that Less bumbled it's way into working on the majority of these, even outpacing Stylus which didn't even work on half of them. Granted, Less is still a buggy garbage fire that should be avoided. Oh Stylus, poor poor Stylus, I'm happy Sass has some competition, I just wish it was something.... better. Sorry.

So that's it. Sass earns it's spot at the top yet again. I guess there's a reason why, according to the 2019 State of CSS survey, 90% of devs have both used and would use it again.

Enjoy the take-home game!