title: CSS variable with calculation inside LESS
body: <p>I have a CSS variable called <code>--menuWidth</code>.  I'm trying to use this variable with an arithmetic operator but I'm having trouble.</p>
  
  <p>I tried the following:</p>
  
  <pre><code>left: calc(var(--menuWidth) + 20px);
  </code></pre>
  
  <p>But the <code>less</code> processor output says "OperationError: Operation on an invalid type" (at column 2?)</p>
  
  <p>I found <a href="https://codepen.io/thebabydino/pen/WbwJyg" rel="nofollow noreferrer">this working codepen</a> which actually seems to confirm the syntax above, so I'm assuming this is a LESS issue.  If so, how can I fix it?</p>
  
  <hr>
  
  <p>Here is my file structure:</p>
  
  <p><strong>vars.less</strong></p>
  
  <pre><code>:root {
      --menuWidth: 200px;
  }
  
  @media screen and (min-width: 1280px) and (max-width: 1919px){
      :root {
          --menuWidth: 250px;
      }
  }
  @media screen and (min-width: 1920px){
      :root {
          --menuWidth: 300px;
      }
  }
  </code></pre>
  
  <p><strong>layout.less</strong></p>
  
  <pre><code>#headerContainer {
      left: calc(var(--menuWidth) + 20px);
  }
  </code></pre>
  
  <p><strong>compiled.less</strong></p>
  
  <pre><code>@import "vars.less";
  @import "layout.less";
  </code></pre>