Как передать число с переменной CSS в Sass mixin?

Question

[Артур]

Как передать число с разметки с помощью css переменной, чтобы работал миксин?
codepen.io

Если задебажить, то в миксин так и приходит var(--data), а не число. Как исправить можно?
@include draw-progress(var(--data), $pie-color)

Answer 1

[Александр]

А никак. CSS переменные переделать в SASS переменные - нельзя, они выполняются в разных контекстах. А SASS переменную в CSS переменную переделать можно.

Comments

[Артур]

То есть здесь один выход циклом вывести от 0 до 100 по классу?

@for $i from 0 through 100
        &.persent-#{$i}
            @include draw-progress($i, $pie-color)

[Александр]

Артур Кудаев, Как вариант. Можно еще переделать на conic-gradient, и всё. Пример.

[Артур]

Александр, Да, знаю за него, но пока еще поддержка не очень.. Global 84.86%.

[Александр]

Артур Кудаев, Тогда SVG или Canvas можно использовать.