title: Less CSS fade function not working with variable
body: <p>i'm using Less CSS with bundler, which I build on an Asp.Net platform.</p>
  
  <p>I have the following code:</p>
  
  <pre><code>&amp;::after {
      .ScaleX(0);
      .Transition(0.2s 0.2s);
      background-color: fade(@accentColor, 12%);
      border-radius:0.2rem;
      height:100%;
      top:0;
      z-index:-1;
  }
  </code></pre>
  
  <p>It fails to complile.</p>
  
  <p>If I change the background-color like this, it works:</p>
  
  <pre><code>background-color:@accentColor;
  </code></pre>
  
  <p>I set my color palettes like this:</p>
  
  <pre><code>.AccentPalette(orange);
  
  .AccentPalette(@palette; @color:500) {
      .Swatch(@palette); 
  
      @accentColor:~"@{accent@{color}}";
  
      @accent50:  @50;
      ... and some more
  }
  
  .Swatch(orange)
  {
      @50: #fff3e0;
      @100:#ffe0b2;
      @200:#ffcc80;
      @300:#ffb74d;
      @400:#ffa726;
      @500:#ff9800;
      @600:#fb8c00;
      @700:#f57c00;
      @800:#ef6c00;
      @900:#e65100;
  }
  </code></pre>
  
  <p>Any ideas?</p>