As I mentioned earlier I decided to go with Stylus instead of Sass when I put together the “kind-of-but-not-really” redesign of this site. Stylus seemed to be pretty close to Sass and had many similar features, like placeholder selectors. From what I can tell there’s only one thing that separates Sass and Stylus for me: no @content blocks for mixins.

This was mostly just a tiny problem when I was dealing with media queries. You can’t really create a simple mixin like in Sass and there’s no way to add a variable directly in the @media width property¹ . After some digging around I found a good enough replacement:

breakpoint-lap = 'screen and (min-width: 481px)'

body
  color: red
  @media breakpoint-lap
    color: blue

It’s not a mixin but it made it much easier to manage media queries consistently throughout the site.

On the plus side I found a really useful Stylus function: unit. It can actually change and remove the unit from a value while the Sass equivalent just returns the unit itself. I wrote a small function called pixels that converts a rem value to its counterpart in pixels:

pixels(value)
  unit(value, 'px') * 16

A suprisingly easy solution. This is how you could do it in Sass:

@function pixels($value) {
  @return (($value / ($value * 0 + 1)) * 1px) * 16;
}

I think that it’s not quite as easy to grasp what the Sass function does compared to the Stylus version, although that could just be me.