Discussion on: CSS Custom Properties (vars) with SASS/SCSS, a practical architecture strategy

[Felippe Regazio]

i think the problem is that sass is trying to reach a --v-primary color in a literal way, but --v-primary is not a sass var or value, so the sass function will try to literally act on a --v-primary notation, not its value.

a solution can be declare your css vars from a scss map, then you always have the values as css vars ou sass properties always when needing:

@use "sass:map";

$colors: (
    "primary-color": #fb7988,
    "secondary-color": #4ecdc4,
    "hover-color": #f1f1f1,
    "stripe-color": #f1f1f1,
);

:root {
    @each $color, $value in $colors {
        --#{$color}: #{$value};
    }
}

.op {
    opacity: opacify(map.get($colors, 'primary-color'), .3);
}

you can also take a look on this post:
codyhouse.co/blog/post/how-to-comb...