How to use CSS variables in SASS [scale-color] function?-CodePudding

Similar question but need this help, I want to change the overall website color using two css variables, --color-primary and --color-secondary, because I have two color option in the admin dashboard. Admin can change the color for every listed company according to their branding.

So I have 5 colors, Two are dark and other three are light from same color family.

I want to convert the dark to lighten color in some places. Here is my code which is not working. Codepen

: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;
}

Does anybody know how can I fix this issue? Or is it just not possible? Thanks in advance.

CodePudding user response：

remove the primary color and you will be get going

CodePudding user response：

It cannot take the variable that assigned from css root selecter as an argument. But you can do this as folows:

$primary:blue;
$bg-color:lighten($primary,80%);
or $bg-color:scale-color($primary,$lightness:80%);
.logo{
    background: $bg-color;
}