CSS calc is more supported than media queries

Calc is awesome.

If you’ve not come across it in CSS, it allows you to do calculations. The big benefit is you can calculate across different units. It’s handy when building responsive websites. There are often times you need to calculate things like 20% – 1rem, well now you can! Here is an example.

The best bit is the support. Calc has better support than media queries, yes you read that right. Every browser including back to IE9 support it apart from Opera Mini.

Using SASS variables in Calc

You might try to include SASS variables inside calc and find they don’t work. The output in the CSS file with print exactly what was inside the calc function. If you include one it will print the variable name, not the value. After some digging I found you can wrap your variables so they work like anywhere else. It feels a little hacky but hey, it works!

Just one word of caution

When using it with pre-processors such as SASS or LESS you may start getting calc happy. Keep in mind if you’re calculating two values with the same units you can us your pre-processor. This will create cleaner and faster CSS. Just use calc when calculating two values with different units.

UPDATED 03/07/2015: Added using SASS variables inside calc

Posted on 28th June 2015

Related articles

Notes to your inbox

Be notified when I post something new. Occasional, short emails. Nothing fancy, just links to new articles and content.

I respect your inbox. No spam. Unsubscribe with just a click.


What I'm doing
My now page shows what I'm focusing my efforts on.

Send me an email
dave@daveredfern.com

Follow me online
Twitter
LinkedIn
Github

Photography
Gallery
Instagram