css - 关键帧的混合

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