Tips for CSS calc() usage and syntax

Honestly I don’t know what I ever did before calc() especially for calculating margins. Here’s some helpful tips and tricks I’ve read about and used in the past:

1. Ana Tudor, writing for Smashing Magazine:

We need to keep a few things in mind to ensure that the calc() function works. First, division by zero obviously won’t work. Having a space between the function name and the parenthesis is not allowed. And the plus and minus operators must be surrounded by white space. This means that the following are not valid:

calc(50% / 0)
calc (1em + 7px)

I highly recommend reading Ana’s full article if you are just getting started with calc() or you simply need a refresher.

2. Vincent Pickering writes:

A quite common design decision is to have multiple containers within a wrapping container. The inner containers will be a percentage width of the outer container, so are equally spaced. Given this scenario, you would usually just assign width:33%; to each container and move along. But sometimes, you want extra flexibility for those containers. For example, if you want each box to have a border, you then have to take this in to account as well.

Calc to the rescue again!

width: calc(100% / number of boxes – total margin size);

3. If you’re using calc() in Sass, don’t forget to interpolate the variable!

$var: 10px;
height: calc(100% - #{$var});

So, what do you think ?