sass - 使用 SASS 将列表作为单个参数传递给 mixin

Question

我喜欢用 SASS 制作 mixin，它可以帮助我实现良好的跨浏览器兼容性。我想制作一个如下所示的 mixin:

@mixin box-shadow($value) {
    box-shadow: $value;
    -webkit-box-shadow: $value; 
    -moz-box-shadow: $value; 
}

我可以传递这样的东西:

@include box-shadow(inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f);

结果是这样的:

box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f;
-moz-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f;
-webkit-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f; 

但是，这不起作用，因为编译器认为我正在尝试传递 mixin 3 参数。 box-shadow 采用可变数量的逗号分隔位，因此我不能只定义像 box-shadow($1,$2,$3) 这样的 mixin。

我尝试通过

@include box-shadow("inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f");

它编译了，但实际上并没有渲染样式。

关于如何解决这个问题有什么建议吗？

Answer 1

变量参数

有时，mixin 接受未知数量的参数是有意义的。例如，用于创建盒子阴影的 mixin 可能采用任意数量的阴影作为参数。对于这些情况，Sass 支持“变量参数”，它们是 mixin 声明末尾的参数，它获取所有剩余参数并将它们打包为列表。这些参数看起来就像普通参数，但后面跟着 .... 例如:

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

通过:http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_arguments