Visual Studio中的SASS:关键帧和浏览器兼容性

时间:2012-06-11 14:26:13

标签: visual-studio-2010 sass

我目前正在使用SASS和Visual Studio(使用Mindscape),我想创建一个简单的mixin,而不必编写-ms-, - o-,-webkit-等...

我有这个最终的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:

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

但是mindscape不喜欢我的mixin中的“@”:(

我该怎么做?

感谢

0 个答案:

没有答案