我有这个 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 -> 新渐变语法),方向需要与标准语法相反。
从 SASS 3.1 开始,您可以传递命名参数来执行此操作:
@include linear-gradient($from: #7a7a7a, $to: #1a1a1a, $ie-filters: true);
其余默认即可。
与
"sass": "^1.67.0"
我尝试了一种解决方法,并且成功了。但是,如果您不想在
@include
期间包含它们,则需要指定默认的 null
值。
// _mixins.scss
@mixin flex-base(
$display: flex,
$direction: null,
$wrap: null,
$align: null,
$justify: null,
$gap: null
) {
display: $display;
flex-direction: if($direction, $direction, null);
flex-wrap: if($wrap, $wrap, null);
align-items: if($align, $align, null);
justify-content: if($justify, $justify, null);
gap: if($gap, $gap, null);
}
// _sth.scss
.sth {
@include flex-base($align: center, $justify: center);
&__else {
@include flex-base($align: center, $gap: 4rem);
@media screen and (max-width: 767.98px) {
@include flex-base($direction: column);
}
}
}
希望它能帮助那里的人。