DEV Community 👩‍💻👨‍💻

Cover image for Who want's to date a Pre-Processor! Game Show edition!
The Jared Wilcurt
The Jared Wilcurt

Posted on • Updated on

Who want's to date a Pre-Processor! Game Show edition!

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: (-->);
}
Enter fullscreen mode Exit fullscreen mode

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 {};
Enter fullscreen mode Exit fullscreen mode

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: (-->);
Enter fullscreen mode Exit fullscreen mode

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: {}; */
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (2)

Collapse
 
tomhodgins profile image
Tommy Hodgins

Try a { --a: #{oops}; }

Collapse
 
thejaredwilcurt profile image
The Jared Wilcurt Author

This seems to be fixed now (it was broken at the original time of the comment). It now outputs this

a {
  --a: oops;
}
Enter fullscreen mode Exit fullscreen mode

which is what I'd expect

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠