我写的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;
干的方式好多了
是传递$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;
}