sassdart-sass

rgb/rgba function doesn't work using scss color variables

I'm currently making the switch to from node-sass to dart-sass. I used to be able to define colour opacity with a mix of hex and rgb like this:

$colour-black: #000000;

.element {
    background-color: rgb($colour-black, 0.16);
}

However, now it triggers errors and states I'm missing $blue and wants me to provide rgb values

SassError: Missing element $blue.

This only works when I give it a strict rgb code like rgb(0,0,0, .16); but it won't work if I use rgb($colour-black, $colour-black, $colour-black, 0.16)

Is this related to dart-sass or is there something simple I'm missing. Everywhere I've looked it sates I can write rgb codes in scss using hex colour variables. What Am I missing? Thanks for insight you can provide.

"sass-loader": "^12.1.0", "sass": "^1.48.0", "postcss": "^8.3.9",

Solution

  • Try background-color: rgba($colour-black, 0.16);

    You need to use rgba(); when setting opacity, not rgb();