Не могу вставить значения в псевдоэлемент через var()

HTML

<div class="category">
    <img src="<?php echo PATH_IMG .'/type/computer.png'?>" alt="computer">
    <h2>Computer</h2>
    <div class="description">
        <h2>1092<span class="pcs">pcs.</span></h2>
    </div>
    <div class="chart" style="--chart-percent: 90%;"></div>
</div>

Sass

.chart
    width: var(--chart-percent)
    height: 16px
    border-radius: 12px
    margin-right: auto
    background-color: red
    position: relative
    &::before
        content: var(--chart-percent)
        position: absolute
        left: 50%
        top: calc(50% + 0.25px)
        transform: translate(-50%, -50%)
        white-space: nowrap
        font-weight: 600
        font-size: 0.8rem
        color: var(--color-white)

Почему не вставляется значение в ::before через var(--chart-percent)?