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:
In this line, I have brain-cracker:
$other-color: #0f0;
@debug opacify($other-color, 0.3); // #works
// but:
$primary-color: var(--v-primary-base);
.my-color {
color: $primary-color; // while this works
}
@debug opacify($primary-color, 0.3); // this fails with '$color: --v-primary-base is not a color.'
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:
you can also take a look on this post:
codyhouse.co/blog/post/how-to-comb...