Используйте встроенную переменную стиля как параметр включения SASS mixin

Question

С этим HTML-кодом:

<div class="pie-wrapper pie-wrapper--solid progress" style="--percent: 50; --color: red;"></div>

Я не хочу использовать значение var(--percent) в качестве вызова @mixin @include в файле scss:

@mixin draw-progress--solid($progress, $color) {
    background: linear-gradient(to right, $bg-color 50%, $color 50%);

    &:before {
        @if $progress <= 50 {
            background: $bg-color;
            transform: rotate((100 - (50 - $progress)) / 100 * 360deg * -1);
        } @else {
            background: $color;
            transform: rotate((100 - $progress) / 100 * 360deg);
        }
    }
}

.progress {
    @include draw-progress--solid(#{var(--percent)}, #8e44ad);
}

Проверено и не работает:

@include draw-progress--solid(#{var(--percent)}, #8e44ad);

@include draw-progress--solid(var(--percent), #8e44ad);

Спасибо:)