Use custom CSS variables with SASS functions

Question

:root {
  --red: #f00;
}
div {
  width: 10rem;
  height: 10rem;
  background-color: darken( var( --red ),15% );
}

Outputs the error:

Error: $color: var(--red) is not a color.

Ofcourse this works perfectly fine with regular SASS variables. The code below works as expected:

$red: #f00;

div {
  width: 10rem;
  height: 10rem;
  background-color: darken( $red,15% );
}

Built in CSS variables are a personal preference due to their ability to be accessed with javaScript.

Is it possible to use CSS Variables with SASS functions? Any known solutions or workarounds would help. Even Hacks.

Link to Codepen in SCSS environment: https://codepen.io/user-devsandbox/pen/vYmMzwb