我写的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传递的值，没有输出?
当前回答
我是新的css编译器，希望这有助于，
@mixin positionStyle($params...){
$temp:nth($params,1);
@if $temp != null{
position:$temp;
}
$temp:nth($params,2);
@if $temp != null{
top:$temp;
}
$temp:nth($params,3);
@if $temp != null{
right:$temp;
}
$temp:nth($params,4);
@if $temp != null{
bottom:$temp;
}
$temp:nth($params,5);
@if $temp != null{
left:$temp;
}
.someClass{
@include positionStyle(absolute,30px,5px,null,null);
}
//output
.someClass{
position:absolute;
top: 30px;
right: 5px;
}
其他回答
干的方法
一般来说，一个简单的技巧就是去掉引号。
@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};
}
SASS版本3+，你可以使用unquote():
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
-webkit-box-shadow: $top $left $blur $color unquote($inset);
-moz-box-shadow: $top $left $blur $color unquote($inset);
box-shadow: $top $left $blur $color unquote($inset);
}
这里的例子:将一个列表作为SASS的单个参数传递给mixin
@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;
}
}
超级简单的方法
只需添加一个默认值none到$inset - so
@mixin box-shadow($top, $left, $blur, $color, $inset: none) { ....
现在，当没有$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 );
}
对六烷也有效
老问题了，我知道，但我认为这仍然是相关的。可以说，更清晰的方法是使用unquote()函数(SASS从3.0.0版本开始就有了):
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
-webkit-box-shadow: $top $left $blur $color unquote($inset);
-moz-box-shadow: $top $left $blur $color unquote($inset);
box-shadow: $top $left $blur $color unquote($inset);
}
这大致相当于Josh的回答，但我认为显式命名的函数比字符串插值语法更容易混淆。
