如何将列表作为单独的参数传递给 SASS 中的 mixin？答案

【问题标题】：How to pass a list as separate arguments to a mixin in SASS?如何将列表作为单独的参数传递给 SASS 中的 mixin？
【发布时间】：2012-12-24 23:38:51
【问题描述】：

我有一些使用指南针阴影混合的元素。由于参数相同，我希望将它们放在变量中。我认为这就是 variable arguments 的用途，但显然我做错了，因为以下内容不起作用：

// my shadow style
$shadow: #000000, 0px, 0px, 20px;

.list {
    @include single-box-shadow($shadow...);
}

这应该是一样的

.list {
    @include single-box-shadow(#000000, 0px, 0px, 20px);
}

但是虽然第二个示例有效，但第一个示例正在编译为

-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;

我在这里做错了什么？

指南针版本是 0.12.2，SASS 是 3.2.3。

编辑：我正在使用 yeoman 进行编译，也许它使用了不同的（旧）版本？我该如何检查？

【问题讨论】：

【解决方案1】：

当您使用变量调用 mixin 时，您实际上在做的是：

@include single-box-shadow((#000000, 0px, 0px, 20px));

整个列表作为 mixin 的第一个参数传递：$color。如果您想重用特定的 box-shadow 值，请使用带有空格分隔列表的 box-shadow mixin，或者创建您自己的自定义 box-shadow mixin。

【讨论】：

谢谢。我该怎么做？指南针文档真的很糟糕。我尝试了$shadow: $black 0px 0px 20px; 和@include box-shadow($shadow);，它们也只是呼应了“无”阴影。
你试过在没有 Yeoman 的情况下编译它吗？使用compass watch 对我来说编译得很好。不过，查看版本历史记录，Yeoman 必须有一个非常旧版本才能正常工作。