Mixin for keyframes

Question

我正在尝试为关键帧做一个 mixin，但它不断在更新的 scss 编译器中出现问题。

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

VS Code 在“0%”处不断向我显示错误，提示“[scss] } expected”

不确定是什么问题。

Answer 1

因为 CSS 中的关键帧动画由两部分组成——样式上的动画名称和根中的 @keyframes 声明——要按照您描述的方式创建一个 mixin，它必须像这样设置：

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

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

然后您可以将 mixin 与以下内容一起使用：

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

这将编译成以下 CSS：

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