2

私は現在、Visual Studio (Mindscape を使用) で SASS を使用しており、-ms-、-o-、-webkit- などを記述する必要がない単純な mixin を作成したいと考えています。

私はこの最終的なCSSを持っています:

@-webkit-keyframes animate-loading-bar {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}   

@-moz-keyframes animate-loading-bar {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}   

@-ms-keyframes animate-loading-bar {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}   

@keyframes animate-loading-bar {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

だから私はミックスインを作成しようとします:

@mixin keyframe($name){
    @-webkit-keyframes #{$name} {
        0% { background-position: 0 0; }
        100% { background-position: 50px 50px; }
    }   

    @-ms-keyframes #{$name} {
        0% { background-position: 0 0; }
        100% { background-position: 50px 50px; }
    }   

    @-moz-keyframes #{$name} {
        0% { background-position: 0 0; }
        100% { background-position: 50px 50px; }
    }   

    @keyframes #{$name} {
        0% { background-position: 0 0; }
        100% { background-position: 50px 50px; }
    }   
}

しかし、マインドスケープは私のミックスインの「@」が好きではありません:(

どうやってやるの?

感謝

4

0 に答える 0