Question

我正在尝试为关键帧进行混合，并且它在新的scss编译器中不断崩溃。

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

VS代码不断向我显示“ 0％”的错误，提示“ [scss]}”

不确定是什么问题。

Answer 1

因为CSS中的关键帧动画分为两部分-样式上的动画名称，以及根目录中的@keyframes声明-要以您描述的方式创建混合，因此必须进行如下设置：

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

关键帧的混合

1 个答案: