私は現在、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; }
}
}
しかし、マインドスケープは私のミックスインの「@」が好きではありません:(
どうやってやるの?
感謝