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

如何用逗号为多个值在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)

解决方法

从 official documentation：

Sass supports “variable arguments,” which are arguments at the end of a mixin declaration that take all leftover arguments and package them up as a list. These arguments look just like normal arguments,but are followed by .... For example:

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

原文地址：https://www.jb51.cc/css/217399.html