Using sass lighten functions with variable not working

Question

I am using SASS in my project with

Here if my variables code

:root, [data-theme="default"] {
    --text-color: #383143;
}
$text-color: var(--text-color);

i am using that variable with lighten function like bellow,

body {
    color: lighten($text-color, 10%);
}

I am getting the following error,

Error: argument $color of lighten($color, $amount) must be a color on line 10 of assets/scss/base/typography.scss, in function lighten

How can I use lighten function with that variable? I need to use --text-color: #383143; that format for the color switcher purpose.

Answer 1

You can't use SASS variables in CSS variables as those are compiled before CSS is running. To solve this you could move the CSS variable to be defined by SASS, like this

$text-color: #383143;
:root, [data-theme="default"] {
  --text-color: #{$text-color};
}