跳过Sass mixin中的可选参数

无礼的 CSS

西门斯丁

2020-03-20

我有这个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- > 新的渐变语法),该方向需要与标准语法相反。

第2510篇《跳过Sass mixin中的可选参数》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
老丝村村Stafan 2020.03.20

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

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

其余的将是默认设置。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android