Just curious how often the css calc function gets executed. Is it executed once when the page loads or is it recalculated every time the page is resized? Have googled around a bit, but I can't find the answer. It seems like it would only need to be calculated once, but I'm not sure.
I just did a very rough test where I added a custom property to a width calc and changed that custom property in a media query. The width of my element did change on resize.
This echos how I'd have assumed it worked. The browser re-paints and re-renders any elements it needs to as the screen changes in any capacity. If you resize, add or remove things from the dom, or any other changes take place, the browser will re-paint and re-render as needed.
I've attached my rough codepen example, if you size below 500px, the size of the red box will change to match the new custom property size.
:root {
--calcTest: 100px;
}
.test {
height: 100px;
width: 100px;
background-color: red;
width: calc(100px + var(--calcTest));
}
@media (max-width: 500px) {
:root {
--calcTest: 500px;
}
}