通用@mixin for sass具有多个不同的值

Question

如何使用逗号,在sass中为多个值创建一个通用的@mixin，用户现在可能不知道每个包含mixin的值有多少？

用户可能希望在某些情况下放置一个阴影，并且可能是某些不同css样式的5个阴影，并且具有不同的值。

最佳方法是什么，或者我们有选择吗？

text-shadow: 0 0 5pt white,
                0 0 6pt white,
                0 0 7pt white,
                0 0 8pt white,
                0 0 9pt white,
                0 0 10pt white,
                0 0 11pt white,
                0 0 12pt white,
                0 0 13pt white,
                0 0 14pt white,
                0 0 15pt white,
                0 0 16pt white,
                0 0 17pt white,
                0 0 18pt white,
                0 0 19pt white;

我需要这样的事情：

@mixin textShadow($h-shadow:$baseUnit * 0, $v-shadow:$baseUnit * 0, $blur:$baseUnit * 2, $color:white)

Answer 1

来自official documentation：

  

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);
}