37

我有这个 mixin 来处理一个简单的 CSS3 线性渐变：

@mixin linear-gradient($from, $to, $dir: bottom, $dir-webkit: top, $ie-filters: false) {
    background-color: $to;
    background-image: -webkit-linear-gradient($dir-webkit, $from, $to);
    background-image: linear-gradient(to $dir, $from, $to);
    @if $ie-filters == true and $old-ie {
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($from)}', endColorstr='#{ie-hex-str($to)}');
    }
}

$dir是“方向”的缩写。

如果我需要设置$ie-filters“真”并且我不需要更改$dir/$dir-webkit默认值，我仍然需要重新声明它们，这显然不是很干燥和最佳，所以我必须这样做：

@include linear-gradient(#7a7a7a, #1a1a1a, bottom, top, true);

当我只想这样做时：

@include linear-gradient(#7a7a7a, #1a1a1a, true);

调用mixin时如何以这种方式跳过参数？

PS，如果您想知道$dir-webkit它适用于 Webkit 的参数，因为它仍然无法处理新的渐变语法（请参阅： http: //generatedcontent.org/post/37949105556/updateyourcss3 -> New gradient syntax），方向需要与标准语法相反。

4

1 回答 1

62

从 SASS 3.1 开始，您可以传递命名参数来做到这一点：

@include linear-gradient($from: #7a7a7a, $to: #1a1a1a, $ie-filters: true);

其余的将是默认的。

于 2013-01-21T11:01:07.523 回答