Utopia SCSS Library


Utopia — the extremely handy fluid type and space tool — now has an SCSS (Sass) library which looks great.

I don’t really use Sass anymore, but a lot of people do. Rightly so: it’s great!

I’ll tell you what else is great: Utopia. I’m somewhat of a super fan, so anything Trys and James add to the project is immediately welcomed by me. I think this particular feature is a great addition though because it gives SCSS-based codebases that little bit of extra maintainability.

The way I use Utopia is I stole the calculation off Trys (with permission 😅) and used it in a little node script that sits in the codebase. It means that the type scale can be updated via design tokens without having to go back to the Utopia site to get a new set of Custom Properties. It’s nice that Sass users will get this sorta thing now.

The Utopia team have also released a JS-based core system to use in your tooling of choice too.

Check it out

Hello, I’m Andy and I’ll help you to level up your front-end development skills.

I’m a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I’m the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.