我写的mixin是这样的:
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
-webkit-box-shadow: $top $left $blur $color $inset;
-moz-box-shadow: $top $left $blur $color $inset;
box-shadow: $top $left $blur $color $inset;
}
当调用时，我真正想要的是，如果没有$inset值被传递，什么都不输出，而不是编译成这样:
-webkit-box-shadow: 2px 2px 5px #555555 "";
-moz-box-shadow: 2px 2px 5px #555555 "";
box-shadow: 2px 2px 5px #555555 "";
我如何重写mixin，以便如果没有$inset传递的值，没有输出?
当前回答
我知道这不是你正在寻找的答案，但你可以通过“null”作为@include box-shadow mixin的最后一个参数，就像这个@include box-shadow(12px, 14px, 2px，绿色，null);现在，如果该参数在该属性中仅为1，那么该属性(及其(默认)值)将不会被编译。如果在“行”上有两个或更多的参数，只有你为空的参数不会被编译(你的情况)。
CSS输出完全是你想要的，但你必须写你的null:)
@include box-shadow(12px, 14px, 2px, green, null);
// compiles to ...
-webkit-box-shadow: 12px 14px 2px green;
-moz-box-shadow: 12px 14px 2px green;
box-shadow: 12px 14px 2px green;
其他回答
你总是可以把空赋给你的可选参数。这里有一个简单的解决方法
@mixin box-shadow($top, $left, $blur, $color, $inset:null) { //assigning null to inset value makes it optional
-webkit-box-shadow: $top $left $blur $color $inset;
-moz-box-shadow: $top $left $blur $color $inset;
box-shadow: $top $left $blur $color $inset;
}
超级简单的方法
只需添加一个默认值none到$inset - so
@mixin box-shadow($top, $left, $blur, $color, $inset: none) { ....
现在，当没有$inset被传递时，什么也不会显示。
以下是我使用的解决方案，附注如下:
@mixin transition($trans...) {
@if length($trans) < 1 {
$trans: all .15s ease-out;
}
-moz-transition: $trans;
-ms-transition: $trans;
-webkit-transition: $trans;
transition: $trans;
}
.use-this {
@include transition;
}
.use-this-2 {
@include transition(all 1s ease-out, color 2s ease-in);
}
更喜欢将属性值作为原生CSS传递，以接近“舌头” 允许传递可变数量的参数 为惰性定义一个默认值
@mixin box-shadow($left: 0, $top: 0, $blur: 6px, $color: hsla(0,0%,0%,0.25), $inset: false) {
@if $inset {
-webkit-box-shadow: inset $left $top $blur $color;
-moz-box-shadow: inset $left $top $blur $color;
box-shadow: inset $left $top $blur $color;
} @else {
-webkit-box-shadow: $left $top $blur $color;
-moz-box-shadow: $left $top $blur $color;
box-shadow: $left $top $blur $color;
}
}
我知道这不是你正在寻找的答案，但你可以通过“null”作为@include box-shadow mixin的最后一个参数，就像这个@include box-shadow(12px, 14px, 2px，绿色，null);现在，如果该参数在该属性中仅为1，那么该属性(及其(默认)值)将不会被编译。如果在“行”上有两个或更多的参数，只有你为空的参数不会被编译(你的情况)。
CSS输出完全是你想要的，但你必须写你的null:)
@include box-shadow(12px, 14px, 2px, green, null);
// compiles to ...
-webkit-box-shadow: 12px 14px 2px green;
-moz-box-shadow: 12px 14px 2px green;
box-shadow: 12px 14px 2px green;
