Mixin for keyframes

Question

I'm trying to do a mixin for keyframes and it keeps breaking in newer scss compilers.

@mixin frame($start-position, $end-position) {
    0% { 
        background-position: $start-position; 
    }
    100% {
        background-position: $end-position;
    }
}

VS Code keeps showing me an error at "0%" saying "[scss] } expected"

Not sure what the problem is.

Possible duplicate of [SASS (not SCSS) syntax for css3 keyframe animation](https://stackoverflow.com/questions/18894981/sass-not-scss-syntax-for-css3-keyframe-animation) — amphetamachine, Sep 26 '18 at 17:25

score 0 · Answer 1 · answered Sep 26 '18 at 19:05

Because keyframe animations in CSS are 2 parts — the animation name on the style, and the @keyframes declaration in the root — to create a mixin the way you're describing, it would have to be set up something like this:

@mixin bgAnimation($name, $start-position, $end-position) {
    animation-name: $name;

    @at-root {
        @keyframes #{$name} {
            0% {
                background-position: $start-position;
            }
            100% {
                background-position: $end-position;
            }
        }
    }
}

You could then use the mixin with the following:

.class {
    animation: 10s linear;
    animation-iteration-count: infinite;
    @include bgAnimation(animation-name, 0px, 100px);
}

That would compile into the following CSS:

.class {
    animation: 10s linear;
    animation-iteration-count: infinite;
    animation-name: animation-name;
}
@keyframes animation-name {
    0% {
        background-position: 0px;
    }
    100% {
        background-position: 100px;
    }
}

Mixin for keyframes

1 Answers1