我写的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传递的值，没有输出?
当前回答
干的方式好多了
是传递$args…到@mixin。 这样，不管你传递多少个$args。 在@input调用中，你可以传递所有需要的参数。 像这样:
@mixin box-shadow($args...) {
-webkit-box-shadow: $args;
-moz-box-shadow: $args;
box-shadow: $args;
}
现在你可以通过传递所有需要的参数在每个类中重用你的box-shadow:
.my-box-shadow {
@include box-shadow(2px 2px 5px #555, inset 0 0 0);
}
其他回答
您可以将null属性作为默认值，如果您不传递该参数，它将不会被解释。
@mixin box-shadow($top, $left, $blur, $color, $inset:null) {
-webkit-box-shadow: $top $left $blur $color $inset;
-moz-box-shadow: $top $left $blur $color $inset;
box-shadow: $top $left $blur $color $inset;
}
这意味着您可以像这样编写include语句。
@include box-shadow($top, $left, $blur, $color);
而不是这样写。
@include box-shadow($top, $left, $blur, $color, null);
如答案所示
更干燥的方式!
@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);
}
干的方式好多了
是传递$args…到@mixin。 这样，不管你传递多少个$args。 在@input调用中，你可以传递所有需要的参数。 像这样:
@mixin box-shadow($args...) {
-webkit-box-shadow: $args;
-moz-box-shadow: $args;
box-shadow: $args;
}
现在你可以通过传递所有需要的参数在每个类中重用你的box-shadow:
.my-box-shadow {
@include box-shadow(2px 2px 5px #555, inset 0 0 0);
}
我是新的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;
}
我知道这不是你正在寻找的答案，但你可以通过“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;
