Comments on: A Complete Guide to calc() in CSS

By: Leonie

Leonie — Thu, 16 Apr 2020 14:11:55 +0000

I heavily use calc() in the sizes attribute of responsive <img /> and <picture> (there: <source />) images. An example would look like this:

<img sizes="(min-width: 470px) 400px, (min-width: 400px) calc(100vw - 70px), calc(100vw - 10px)" srcset="..." />

Finding out that calc() can be used in sizes has really changed the world to me.

By: Jose Lizana

Jose Lizana — Wed, 18 Mar 2020 18:14:31 +0000

Sample, if you need to use calc with sass variables

$mainMargin:20px;

.main{
    width:calc(100vw - #{$mainMargin});
    height:calc(100vh - #{$mainMargin*2});
}

By: Peter

Peter — Wed, 18 Mar 2020 10:35:44 +0000

Similarly to attr() you also cannot use counter() inside calc() (or outside of content), see https://github.com/w3c/csswg-drafts/issues/1026.

By: Chris Morgan

Chris Morgan — Wed, 18 Mar 2020 03:29:31 +0000

For the non-functional @media (min-width: calc(40rem + 1px)) concept, use @media not all and (max-width: 40rem) instead. Even if calc() worked in that context, it would be the wrong thing to use, because the viewport width could be between 40rem and 40rem + 1px (e.g. 640.5px on a 2× display with 16px base font size). In the “custom properties and calc()” section, for --spacing-L: var(--spacing) * 2;, I think it would be worthwhile noting that this is the place where nesting calc() is convenient. If you make it --spacing-L: calc(var(--spacing) * 2);, then it will work as var(--spacing-L) or calc(var(--spacing-L) + …). I would also remind people that viewport units are fundamentally broken and bad; the likes of calc(100vw - 20px) are wrong unless you can guarantee that the document has no vertical scrollbar. The full-width bleed example is wrong, which tends to lead to use of overflow: hidden to suppress a horizontal scrollbar (which also leaves the thing incorrectly sized and positioned, but if it’s just a photo it probably doesn’t matter), which I have regularly seen go wrong when actual content subsequently overflows. You strongly should not use that technique; find another.