CSS calc() behaviour in CSS variables
<p>I'm curious to the behaviour of using calc() in setting a CSS variable.</p>

<p>Example:</p>

<pre><code>#test {
    --halfWidth: calc(100% / 2);
}
</code></pre>

<p>Now, if the <code>#test</code> element, say a <code>div</code>, was 500px wide, I would like the <code>--halfWidth</code> variable to be set to 250px.</p>

<p>But, as far as I can tell the <code>var(--halfWidth)</code> code used elsewhere simply drops in the <code>calc(100% / 2)</code> string instead of <code>250px</code>. Which means that I can't use the calculation of say element A and use it in element B later on, since it would simply set for example <code>width: var(--halfWidth);</code> as half the width of element B instead of half the width of element A, where the variable was defined.</p>

<p>I've scoured the web trying to find any documentation on the behaviour of this, but I have so far drawn a blank.</p>

<p>Ideally, setting a CSS variable using calc should be available in two variants:</p>

<ol>
<li>One variant working just like this example, simply dropping in the string as-is, bar any in-string variable replacements.</li>
<li>A second variant where calc() would yield the result of the calculation instead of simply replacing the string.</li>
</ol>

<p>How to achieve this? I'd rather leave the actual implementation to people suited to it, but one possibility would be an <code>eval()</code> kind of thing; like <code>eval(calc(100% / 2))</code> would give the result <code>250px</code>.</p>

<p>Anyway, if anyone have any real documentation on this behaviour or a solution to how to get the example above to yield the result instead, I'm all ears!</p>

<p><em>Edit: Just FYI, I have read the specs at <a href="https://drafts.csswg.org/css-variables/" rel="nofollow noreferrer">https://drafts.csswg.org/css-variables/</a></em></p>