DEV Community

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

tvld profile image
Tom • Edited

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.'

felipperegazio profile image
Felippe Regazio Author

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);
Enter fullscreen mode Exit fullscreen mode

you can also take a look on this post: