css - 用于具有多种不同值的 sass 的通用 @mixin

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

从官方文档：

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