在 Sass mixin 中跳过可选参数

Posted 2023-02-22

【中文标题】在 Sass mixin 中跳过可选参数

【英文标题】：Skipping an optional argument in Sass mixin

【发布时间】：2013-01-04 08:20:36

【问题描述】：

我有这个 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 'true' 并且我不需要更改 $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 -> 新渐变语法），方向需要与标准语法相反。

【问题讨论】：

你试过了吗，通过null？

刚刚尝试过，但在使用null 时不输出任何值：@include linear-gradient(#f60, #c00, null, null, true); 编译为：background-image: -webkit-linear-gradient(, #ff6600, #cc0000); background-image: linear-gradient(to, #ff6600, #cc0000);

试试这个bravedick.github.com/mooxins mixins。没有过滤器，顺便说一句。

【参考方案1】：

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

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

其余的将是默认的。

【讨论】：

什么？我只是向你展示了它是如何工作的，这正是你所要求的。您想跳过第三和第四个参数，这就是它的完成方式。

也许你不明白我的回答。这就是你用你的值调用 mixin 的方式。只要传递命名参数，就可以省略其他两个参数。

对不起，伙计，我愚蠢地将您的代码 sn-p 中的 @include 误读为 @mixin，所以我认为您在实际的 mixin 中声明了 $from 和 $to 的默认值。整天都在 mixins 中工作，所以大脑有点疲惫。无论如何，一切正常。干杯。