CSS Less mixins для ключевых кадров

Question

Как написать меньше миксин для ключевых кадров. Я пытался следующим образом, но он дает ошибку, ParseError: Параметры директивы не распознаны.

.keyFrameAlert(@-webkit-keyframes);

Mixin

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

Это немного отличается от того, что вы пробовали ранее, так как вам все равно нужно будет печатать все префиксы вашего поставщика, но вам нужно всего лишь изменить ключевые кадры в одном месте.