Sass won't compile variable if property starts with double dash

Question

I have updated the sass ruby gem to the latest version. Now when compiling .scss files the compiler won't replace the variables by its values if the property name before the variable (the property's value) starts with double dash --:

Example (source.scss):

$header-height: 58px;
$accent: red;

paper-tabs {
    height: $header-height;
    --paper-tabs-selection-bar-color: $accent;
}

Expected output (output.css):

paper-tabs {
    height: 58px;
    --paper-tabs-selection-bar-color: red;
}

Undesired output (output.css):

paper-tabs {
    height: 58px;
    --paper-tabs-selection-bar-color: $accent;
}

Am I doing something wrong? Can I correct it somehow? Thank you.

Answer 1

After struggling for a while I found the solution. Just treat the variables as if they were inside of a string.

So instead of:

$header-height: 58px;
$accent: red;

paper-tabs {
    height: $header-height;
    --paper-tabs-selection-bar-color: $accent;
}

We should write:

$header-height: 58px;
$accent: red;

paper-tabs {
    height: $header-height;
    --paper-tabs-selection-bar-color: #{$accent};
}

And the variable is correctly replaced in output.css as expected. Thank you all.