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

Question

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

// 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 编译，也许它使用不同的（旧）版本？我该如何检查？

score 0 · Accepted Answer

single-box-shadowmixin 不使用可变参数（参见：http : //compass-style.org/reference/compass/css3/box_shadow/#mixin-single-box-shadow ）。

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

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

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

1 回答 1