How to use css variable in @if of sass/scss

:root {
    --size-value: 0.5;
}

$size-val: val(--size-value);

[variables.scss]

.container {
    @if $size-val == 0.5 {
        height: 50px;
    }
    @else {
        height: 40px;
    }
}

[case1]

.container {
    @if #{$size-val} == 0.5 {
        height: 50px;
    }
    @else {
        height: 40px;
    }
}

[case2]

I want to use codes like case1 or case2, but it doesn't work...
'--size-value' is for changing value by javascript.
How do I solve this?