title: How to use CSS variables in SASS [scale-color] function?
body: <p>Similar question but need this help, I want to change the overall website color using two css variables, <code>--color-primary</code> and <code>--color-secondary</code>, because I have two color option in the admin dashboard. Admin can change the color for every listed company according to their branding.</p>
  <p>So I have 5 colors, Two are dark and other three are light from same color family.</p>
  <p>I want to convert the dark to lighten color in some places. Here is my code which is not working.
  <a href="https://codepen.io/figarali/pen/wvqWmQO" rel="nofollow noreferrer">Codepen</a></p>
  <pre><code>:root {
  --color-primary: blue;
  --color-secondary: red;
  }
  
  $primary : var(--color-primary);
  
  //convert to light form primary color
  $bg-color : scale-color($primary, $lightness:80%);
  
  .logo{
    background: $bg-color;
    height: 100px;
    width:100px;
  } 
  </code></pre>
  <p>Does anybody know how can I fix this issue? Or is it just not possible? Thanks in advance.</p>