Today I learned: How to use a Sass variable within a CSS property (a.k.a variable) value

In order to do that, you need to interpolate the Sass variable, using the #{$your-sass-variable-name} notation.
This may not be enough if the Sass variable contains quotations marks.

In some instance you should combine the previous notation with the meta.inspect() function in order to preserve the quotes.

Here are examples of the both variants:

$accent-color: #fbbc04;
$font-family-monospace: Menlo, Consolas, "Courier New", monospace;

:root {
  --accent-color-right: #{$accent-color};
  --font-family-monospace: #{meta.inspect($font-family-monospace)};
}

Source: Breaking Change: CSS Variable Syntax on sass-lang.com