我目前正在使用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中的“@”:(
我该怎么做?
感谢