Can't Separate CSS Animations into SASS Partial with Compass

I'm trying to separate my animations from my main css. All of my partials are imported in one main styles.scss. When I have my animations at the bottom of my _footer.scss file, where the file that the animation is being called, then Compass will compile my sass. However, when I pull the animation out and put it into a partial (_animations.scss) and import it, then it gives me this error:

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

The Animation 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); }
}

I've tried importing it before and after my _footer.scss partial. Makes no sense to me that it'd give an error when separated but no error when in the same file because isn't it all compiling into the same file anyways? Can you not separate out animations with sass/compass? Do you have to use a mixin or something? Thanks!

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

上一篇: @mixin与Compass编译

下一篇: 无法使用罗盘将CSS动画分为部分SASS