Sass为具有多个属性的mixin注入逗号

Question

当使用具有多个值的mixin时，我的Sass版本似乎没有正确编译。当我使用类似下面的代码时：

@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $color;
    -moz-box-shadow:inset $top $left $blur $color;
    box-shadow:inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}

.drop-shadow{
    @include box-shadow(10px, 5px, 5px, #383838);
}

我得到了结果：

.drop-shadow {
  box-shadow: 10px, 5px, 5px, #383838;
}

Chrome会因为属性值之间的逗号而拒绝接受该属性为有效。

有没有人见过这样的东西或者知道如何解决这个问题我找不到任何其他人谈论这类问题的文章。

我正在使用：

• 指南针0.12.6（Alnilam）
• grunt-cli v0.1.13
• grunt v0.4.5

我尝试在codePen上重新创建问题，但似乎工作正常。 http://codepen.io/jpeak/pen/AbrJa

Answer 1

我找到答案似乎因为某种原因罗盘将每个属性之后的逗号视为属性的一部分并将其转置。

所以

@include box-shadow(10px, 5px, 5px, #383838);

=

box-shadow: 10px, 5px, 5px, #383838;

和

@include box-shadow(10px 5px 5px #383838);

=

box-shadow: 10px 5px 5px #383838;

不确定是否有人可以解释为什么会这样。