SCSS to CSS

It has been a two lifetimes since I was a professional web developer, and I haven’t been consistently keeping up with the state of the technology. I did remember reading a while back that there have been a lot of changes to CSS over the years, and one of the things jumped out: CSS Nesting.

When I built this site, I relied heavily on SCSS for the styling. Nested CSS is one of those features that made sense to me. I also used some of the color functions (mainly darken and lighten).

After hearing about the new features landing in CSS proper, I had the thought in the back of my head that I should migrate away from SCSS and over to plain CSS. I figured this would be a bit of an arduous task, and so I put it off until I had more time to look at it. As it turns out, it only took a few minutes.

I had already mostly moved my variables from scss style $bgColor to css style var(--bg-color) (I don’t remember when I did that, but it must have been a while ago). There were a smattering of short style // comments that needed to be changed to /* long style */. The one thing that took a little fiddling were the three places I had used darken and lighten. My color theory is very weak, so after trying out some numbers with the color-mix CSS function, I was able to get the colors to look basically the same.

All in all, it took me less time to convert the SCSS to CSS than it did to write this article.