title: Using CSS Variables with Calc() not working when 2nd parameter
body: <p>I'm new to using CSS variables with calc() so forgive me if this is obvious, but I'm trying to perform the following calculation and can't for the life of me figure out why it's not working:</p>
  
  <pre><code>$h2-font-size: 21px;
  
  --padding-top: calc(#{$h2-font-size}/3);
  --padding-bottom: calc(#{$h2-font-size}/var(--padding-top));
  
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
  </code></pre>
  
  <p>The first part calculates OK (i.e. <code>--padding-top: calc(#{$h2-font-size}/3);</code>) correctly works out to <code>7</code> and populates that OK in the <code>padding-top:</code> value.</p>
  
  <p>However, the <code>padding-bottom:</code> value calculates as <code>0</code>.</p>
  
  <p>Any idea where I'm going wrong?</p>
  
  <p>Initially I wondered if it was because I was using a <code>sass</code> variable, but if that was the problem I would have expected <code>--padding-top:</code> to fail.... but it doesn't.</p>
  
  <p>I notice that if I DON'T add a px value to the font-size, and place the font-size AFTER the CSS variable, then I do get a value returned (albeit, the wrong number for my needs):</p>
  
  <p><code>--padding-bottom: calc(var(--padding-top)/21);</code> = 0.3333333</p>
  
  <p>However, if I try to swap the order around to give me the right calculation, I get <code>0</code>:
   <code>--padding-bottom: calc(21/var(--padding-top));</code></p>
  
  <p>I know I still have a lot to learn, but I'm hoping someone can pls help steer me in the right direction! </p>
  
  <p>Thanks</p>