The addition of an aspect-ratio
property would indeed solve this specific issue. Glad to see it's being discussed (once wrote an extensive post on this myself).
Thinking further on this, this solution is somewhat limited: it only solves the aspect ratio problem.
A more broader solution could be the introduction of a val()
function. It would work like the var()
function – which reads the value of a custom property – but then for reading values from other properties. The function would yield the computed value of the given property. Combine it with calc()
and you're good to go.
In code, it would result in something like this:
.box {