Jeremy has been updating The Session to use variable font sizes with the new CSS clamp() property. He offers some interesting ideas on how best to do that:
:root {
font-size: clamp(1rem, 0.5rem + 0.666vw, 1.5rem);
}He also notes that in order to do this, he needed to remove Sass from the site. I find that interesting. Sass still appears to be a common prerequisite for frontend jobs, but I've never really understood why new projects would use it. When I returned to the frontend world a couple of years ago, I'd missed the Sass train. By the time I got around to thinking about learning it, I wanted to know what problem it solved. I came to the same conclusion then as Jeremy has done now, which is that all the solutions Sass provides are pretty much native to CSS these days.
Between CSS variables, customer properties, and calc() a lot of the benefit of Sass is now a burden. There are still two big bonuses: multiple files and nesting. I do wish CSS had a native nesting capability, but for the most part when I review Sass code it gives me a headache. DRY is great, but not at the expense of readability, which I fear it often ends up becoming with deep nesting.
As for multiple files, I guess I moved straight into the framework world on return. It's one of the things I love about CSS modules in React, that it lets me colocate my styles with my components from a dev perspective. In many ways, I prefer this to the .scss model.
I still have to work with Sass and imagine that isn't going to change; it's integral to a lot of tech stacks. But it's nice to see that I've potentially skipped needing to embrace it fully.
It feels like something similar has happened with tools like Sass. Sass was the hare. CSS is the tortoise. Sass blazed the trail, but now native CSS can achieve much the same result.
