Question

我正试图将我的动画与我的主要CSS分开。我的所有部分都是在一个主要的styles.scss中导入的。当我的动画在我的_footer.scss文件的底部，即调用动画的文件时，Compass将编译我的sass。但是，当我将动画拉出并将其放入部分（_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 /指南针分开动画？你必须使用mixin或什么？谢谢！

无法使用Compass将CSS动画分离为SASS部分

0 个答案: