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
• 咕噜 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;

不确定是否有人可以解释为什么会发生这种情况。