How can i change css variable to scss color type?

user_13255430 0
Viewed 1449

I add css variable to root because i want to change it dynamically by using JS

#root {
  --primary-color: #4c5b73;
}

$primary-color: var(--primary-color) !default;

.my-component {
 background-color: transparentize($primary-color, 0.85);
}

I want to use the Basic scss function transparentize or lighter or darker

But i got this error

Argument `$color` of `transparentize($color, $amount)` must be a color

How can i tell that this is a color type?

Update

I should do this more earlier
https://codepen.io/colton123/pen/bGVbRjP

sass css
3 Answers

Instead of declaring the : root variable first, makes the code like this one.
Your code flow is not right. It may gonna help you. You should study this article 

$primary-color: #4c5b73;

: root{
   --primary-color: #{$primary-color};
}

.my-component {
   background-color: transparentize($primary-color, 0.85);
}
Admin1

You could just add the alpha channel in regular CSS if you define the color using decimal RGB values instead of a hex code:

:root {
  --primary-color: 76, 91, 7;
}

body {
  background-color: white;
}

.my-component {
  background-color: rgba(var(--primary-color), 0.15);
}
<div class="my-component">
  Test
</div>

user_35589600

You would use getComputedStyle and getPropertyValue

this solution should get you what you need. :)

user_63982630
Related