我写的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传递的值，没有输出?
当前回答
sass@3.4.9:
// declare
@mixin button( $bgcolor:blue ){
background:$bgcolor;
}
而使用时没有价值，按钮会呈蓝色
//use
.my_button{
@include button();
}
带有value, button会是红色的
//use
.my_button{
@include button( red );
}
对六烷也有效
其他回答
@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;
}
}
Sass支持@if语句。(请参考文档)
你可以这样写你的mixin:
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
@if $inset != "" {
-webkit-box-shadow:$top $left $blur $color $inset;
-moz-box-shadow:$top $left $blur $color $inset;
box-shadow:$top $left $blur $color $inset;
}
}
你总是可以把空赋给你的可选参数。这里有一个简单的解决方法
@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;
}
更干燥的方式!
@mixin box-shadow($args...) {
@each $pre in -webkit-, -moz-, -ms-, -o- {
#{$pre + box-shadow}: $args;
}
#{box-shadow}: #{$args};
}
现在你可以更聪明地重用你的盒影:
.myShadow {
@include box-shadow(2px 2px 5px #555, inset 0 0 0);
}
sass@3.4.9:
// declare
@mixin button( $bgcolor:blue ){
background:$bgcolor;
}
而使用时没有价值，按钮会呈蓝色
//use
.my_button{
@include button();
}
带有value, button会是红色的
//use
.my_button{
@include button( red );
}
对六烷也有效
