Nested calc operations

Question

Apparently you have to assign px or % to all numbers that are not being multiplied or divided.

width: calc((100% / 7) - 2px);

Well I feel dumb now. Haha.

As David already stated, calc requires px, % or some kind of unit to work. It is possible to use multiple calculations in one statement just like:

width: calc((100% / 7) - 2px);

For anyone else visiting this page looking for answers, it may be worth mentioning that it can be ANY unit. That is, not just px and %, but also em, rem, vh, vw, vmin, vmax, etc. Calc resolves into a value you could use normally, so in the same way you'd never assign width: 100; you should never let the result of calc be unitless.

When dividing or multiplying, it doesn't really make sense to use units on both sides, but it still requires one of the numbers to have a unit so it knows what to assign the result.

/* These are wrong */
width: calc(75 + 25);
width: calc(4 * 20);
width: 100;

/* These are what the browser expects */
width: calc(75px + 25px);
width: calc(20px * 4);
width: 100px;

I also had a lot of headache when I tried to do that, but fortunately there's an alternative. Instead of writing it all in a single line, you could also use pure css variables using var(), which aside from solving this problem, is also much more readable! Here's an example of how I used it:

#wrapper .leftside .week .superior {
    --wholeWidth: calc(157px * 3);
    --remaining: calc(100% - var(--wholeWidth));
    margin: 0 calc(var(--remaining) / 6);
}

I found it under the "Nested calc() with CSS Variables" in the MDN docs.