跳过Sass mixin中的可选参数

问题描述

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

I have this mixin to handle a simple CSS3 linear gradient:

@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的默认值，我仍然需要重新声明它们，这显然不是非常干且最佳的，所以我必须这样做:

If I need to make $ie-filters 'true' and I don't need to change the $dir / $dir-webkit default values I still need to redeclare them which obviously isn't very DRY and optimal, so I'd have to do this:

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

当我只想这样做时:

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

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

How do I skip over arguments in this way when calling a mixin?

PS，如果您想知道$dir-webkit参数是否适用于Webkit，因为它仍然无法处理新的渐变语法(请参阅:-> 新的渐变语法)，其方向必须与标准语法相反.

PS if you're wondering about the $dir-webkit argument it's for Webkit as it still doesn't handle the new gradient syntax (see: http://generatedcontent.org/post/37949105556/updateyourcss3 -> New gradient syntax), the direction needs to be the opposite of the standard syntax.

推荐答案

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

Starting from SASS 3.1 you can pass named arguments to do that:

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

其余的将是默认设置.

这篇关于跳过Sass mixin中的可选参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！