CODEWITHSUNDEEP
csssass
KimMinJae
KimMinJae

Reputation: 143

How can i change css variable to scss color type?

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

Upvotes: 3

Views: 5144

Answers (3)

Robby Cornelissen
Robby Cornelissen

Reputation: 97152

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>

Upvotes: 1

user13229678
user13229678

Reputation:

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

Upvotes: 2

Joel Hager
Joel Hager

Reputation: 3440

You would use getComputedStyle and getPropertyValue

this solution should get you what you need. :)

Upvotes: -2

Related Questions