Sass is a CSS pre-processor. Even though I’ve been using Sass in many projects, I realised recently at work that I’d only been using it in a very primitive way. Sass mixins didn’t even exist in my mind.
The main ways I’d been using Sass are:
- declaring variables in a single file as the main way of easily configuring an entire project
- extending/inheriting selectors to reduce repetition (to keep the code DRY)
- nesting selectors to create and maintain a clear visual hierarchy
But there’s an incredibly useful feature of Sass that I’d been missing out on. I only accidentally stumbled onto it recently – it’s called Sass mixins.