对 Sass 中的 mixins 和 $variables 感到困惑

Question

这里是 Sass 新手。玩混音。有点不对劲：

$> sass -v
Sass 3.4.23 (Selective Steve)

$> cat myscss.scss

// Keyframe animations
@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
}

@include keyframes(move-up) {
  0% {
    top: 25px;
    opacity: 1;
  }

  100% {
    top: -50px;
    opacity: 0;
  }
}


$> sass myscss.scss
@-webkit-keyframes $animation-name {
  0% {
    top: 25px;
    opacity: 1; }
  100% {
    top: -50px;
    opacity: 0; } }

这就是问题所在。我期待：

@-webkit-keyframes move-up {
  0% {
    top: 25px;
    opacity: 1; }
  100% {
    top: -50px;
    opacity: 0; } }

我错过了什么？

请容忍我在这里添加或无意义的文字。显然，stackoverflow 不允许我发布我的问题，因为他们看到的代码太多而文本太少。希望这已经足够了。

Answer 1

四处搜索，我发现这可以解决问题，但为什么会这样，我不清楚：

@mixin keyframes ($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
}