Question

我正在寻找创建全局渐变mixin。我的问题几乎在标题或下面的例子中。我在文档中或通过谷歌找不到任何内容。

@mixin gradient($fallback, $color-stops..., $dir: "") {
   @if $dir != "" {
  background-color: $fallback; //fallback for older browsers
  background: -webkit-linear-gradient($dir, $color-stops);
  background: -moz-linear-gradient($dir, $color-stops);
  background: -o-linear-gradient($dir, $color-stops);
  background: linear-gradient($dir, $color-stops);
}//end if
@else {
  background-color: $fallback; //fallback for older browsers
  background: -webkit-linear-gradient($color-stops);
  background: -moz-linear-gradient($color-stops);
  background: -o-linear-gradient($color-stops);
  background: linear-gradient($color-stops);
} //end else
}

谢谢

Answer 1

你可以使用两者，但变量参数必须是最后一个：

@mixin gradient($fallback, $dir: "", $color-stops...) { ... }

在你的情况下，这可能并不理想。我建议将color-stops作为列表传递给一个参数。您需要做的就是在它们周围添加括号：

@mixin gradient($fallback, $color-stops, $dir: "") { ... }
@include gradient(red, (to left, red 50%, blue));

虽然我不确定$dir参数究竟是做什么......

你可以在同一个sass mixin中使用Variable和Optional参数吗？

1 个答案: