CSS少关键帧的mixins

Question

如何为关键帧编写Less mixin。 我试过以下方式，但它给出了错误， ParseError：无法识别指令选项。

.keyFrameAlert(@-webkit-keyframes);

密新

.keyFrameAlert(@keyFrame){
    @keyFrame alert {
        0% { 
            opacity: 0; 
        }
        50% {
            opacity: 1; 
        }
        100% { 
            top: 0; 
        }
    }
}

任何人都可以帮助解决这个问题。

Answer 1

我认为由于关键帧的@前缀可能会引发错误，所以在传递@-webkit-keyframes时，它认为您尝试将其传递给具有相同名称的变量。

这种方法略有不同，您可以在其中声明关键帧，并在其中添加包含关键帧集的类。

@-webkit-keyframes alert {.keyframes;}
@keyframes alert {.keyframes;}

.keyframes () {
    0% { 
        opacity: 0; 
    }
    50% {
        opacity: 1; 
    }
    100% { 
        top: 0; 
    }
}

这与您之前尝试的内容略有不同，因为您仍然需要输入所有供应商前缀，但您只需要在一个位置更改关键帧。