Mixin для ключевых кадров - PullRequest
Новая
       1

Mixin для ключевых кадров

0 голосов
/ 26 сентября 2018

Я пытаюсь создать миксин для ключевых кадров, и он продолжает ломаться в новых компиляторах scss.

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

VS код продолжает показывать мне ошибку в «0%», говоря «ожидается [scss]}»

Не уверен, в чем проблема.

1 Ответ

0 голосов
/ 26 сентября 2018

Поскольку анимации по ключевым кадрам в CSS состоят из 2 частей - имени анимации в стиле и объявления @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;
            }
        }
    }
}

Затем вы можете использовать миксин со следующим: 

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