Use inline style variable as SASS mixin include parameter

Asked Apr 08 '19 at 15:00

Active Apr 08 '19 at 15:00

Viewed 1,217 times

With this HTML code:

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

I wan't to use var(--percent) value as @mixin @include call in a scss file:

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

Tested and not working:

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

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

Thanks :)

asked Apr 08 '19 at 15:00

Lito

1,262
2
17
25

2

you cannot because SASS is compiled first and then CSS variable are considered. You cannot use a CSS variable value inside a mixin SASS – Temani Afif Apr 08 '19 at 15:05
@TemaniAfif Then I could do it without mixin/include, with all mixing code inside progress class. – Lito Apr 08 '19 at 15:07
Ok, no, because I can not use @if/@else conditional. – Lito Apr 08 '19 at 15:08
Having the `if else`, you cannot, you can only use something static – Temani Afif Apr 08 '19 at 15:08
1

check this one : https://stackoverflow.com/a/55519869/8620333 .. I guess this is what you want to build – Temani Afif Apr 08 '19 at 15:08
@TemaniAfif, oh! thanks! Please, add this comment as aswer to vote as valid! – Lito Apr 08 '19 at 15:12
1

if the other answer is exactly what you want, no need to repeat it. You can imply upvote it ;) – Temani Afif Apr 08 '19 at 15:35

Use inline style variable as SASS mixin include parameter

0 Answers0