CSS refactoring
Posted in thoughts
A side effect of migrating to Kirby was the opportunity it gave me to revisit my markup and my CSS.
I've been carting a lot of legacy code from way back then, and have just been adding onto it. My first migration gave me an opportunity to redesign the site and brush up my Sass code, but I've been adding custom properties, moved to Dart-Sass, and played around with new technologies without taking the time to breathe.
I used Claude to help me build a styleguide, and run an inventory of my Sass variables and CSS classes which was helpful and fun to watch.
So, no visual redesign this time, but a lot of refactoring behind the scenes. It feels good too.
Replacing Sass with CSS
One area I was keen to explore was how to reduce my dependency on Sass. My code has a mix of Sass variables, mixins and custom properties.
I was already using somewhat modern Sass (@use/@forward, sass:math, color.channel — no more @import), but I wanted to replace the scaffolding Sass was responsible for.
Converting Sass variable to custom properties
Eg. $article-padding: 1.25rem was used many times, often as v.$article-padding * -1 for negative margins. As a custom property it becomes overridable per component — which is what several media queries currently do by hand:
