无法使用罗盘将CSS动画分为部分SASS

我试图将我的动画与主CSS分开。 我所有的部分都被导入到一个主要的styles.scss中。 当我的动画放在我的_footer.scss文件的底部，即动画所在的文件的位置时，Compass将编译我的文件。 但是，当我将动画拉出并放入部分（_animations.scss）并导入它时，它给了我这个错误：

error sass/styles.scss (Line 3 of sass/base/_animations.sass: Invalid CSS after "0% ": expected selector, was "{ transform: sc...")

动画CSS：

footer#site-footer .signup-form input[type="image"]:active {
  outline:none;
  border:2px solid $pink;
  display: inline-block;
  -webkit-animation: shrink-n-grow 0.4s;
     -moz-animation: shrink-n-grow 0.4s;
      -ms-animation: shrink-n-grow 0.4s;
       -o-animation: shrink-n-grow 0.4s;
          animation: shrink-n-grow 0.4s;
}

@keyframes shrink-n-grow {
  0% { transform: scale(1.0); }
  60% { transform: scale(0.85); }
  100% { transform: scale(1.0); }
}
@-webkit-keyframes shrink-n-grow {
  0% { -webkit-transform: scale(1.0); }
  60% { -webkit-transform: scale(0.85); }
  100% { -webkit-transform: scale(1.0); }
}
@-moz-keyframes shrink-n-grow {
  0% { -moz-transform: scale(1.0); }
  60% { -moz-transform: scale(0.85); }
  100% { -moz-transform: scale(1.0); }
}
@-o-keyframes shrink-n-grow {
  0% { -o-transform: scale(1.0); }
  60% { -o-transform: scale(0.85); }
  100% { -o-transform: scale(1.0); }
}
@-ms-keyframes shrink-n-grow {
  0% { -ms-transform: scale(1.0); }
  60% { -ms-transform: scale(0.85); }
  100% { -ms-transform: scale(1.0); }
}

我试过在我的_footer.scss部分之前和之后导入它。 对我来说是没有意义的，它会在分离时给出一个错误，但在同一个文件中没有错误，因为它不是全部编译到同一个文件中？ 你不能用sass /罗盘分离出动画吗？ 你必须使用混音或其他？ 谢谢！

链接地址: http://www.djcxy.com/p/88379.html

上一篇: Can't Separate CSS Animations into SASS Partial with Compass

下一篇: Compass `