在SASS中编写mixin时，有没有办法逃脱@？

我正在尝试为css3中的动画编写混音。css3中的动画需要@keyframe。但是SASS中的mixin声明（以及其他声明）也以@开头。比如说“mixin”、“for”等等。。。因此，我试图为动画编写一个mixin（我试图在mixin中实现所有自动化），就是在传递给CSS时，将SASS的@keyframe转义放在CSS中，而不是解释@keyframe的@。有可能这样做吗

例如：

@mixin animation(
//variables :
$mykeyframe:mykeyframe,
$prop1:background,
$value1-i:white,
$value1-e:red,
$prop2:color,
$value2-i:black,
$value2-e:white,
$prop3:font-weight,
$value3-i:400,
$value3-e:bold,
$time:5s,
$iteration-count:1,
$timing-function:linear,
$delay:0s,
$direction:normal,
$play-state:running
)

{//HERE'S THE PROBLEM :
  @keyframes $mykeyframe{
    0%{$prop1:$value1-i; $prop2:$value2-i; $prop3:$value3-i}
    100%{$prop1:$value1-e; $prop2:$value2-e; $prop3:$value3-e}
  }

  -webkit-animation: $mykeyframe $time $iteration-count; /* Chrome, Safari 5+ */
  -moz-animation: $mykeyframe $time $iteration-count; /* Firefox 5-15 */
  -o-animation: $mykeyframe $time $iteration-count; /* Opera 12.00 */
  animation: $mykeyframe $time $iteration-count; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */

  /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
  animation-timing-function: $timing-function;
  animation-delay: $delay;
  animation-direction: $direction;
  animation-play-state: $play-state;
  /* Safari and Chrome: */
  -webkit-animation-timing-function: $timing-function;
  -webkit-animation-delay: $delay;
  -webkit-animation-direction: $direction;
  -webkit-animation-play-state: $play-state;
}

即使SASS中的mixin（

@mixin

）和conditional（

@for

，

@if

等）指令以符号

@

开头，您仍然可以将其用于不属于SASS库的其他关键字，如

if

，

mixin

等

因此，您仍然可以：

@mixin animation($mykeyframe:mykeyframe) {
  @keyframes $mykeyframe {


  }
}

body {
  @include animation(someframe);

}

这将产生：

body {
  @keyframes someframe {}
}

---

sass编译器是否抛出有关@keyframe的任何错误？因为，正如卡希亚普所说，不应该有冲突。但如果需要，可以使用{}来插值。