使用内联样式变量作为​​SASS mixin包含参数

Question

使用以下HTML代码：

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

我不会在{ssss}文件中将var(--percent)值用作@mixin @include调用：

@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);

谢谢：）