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

Question

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.

user_7477358 · Answer

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

This web site may has a solution https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

user_17091110 · Answer

Remove the primary color and you will get going

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

2 Answers