我写的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”作为@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;
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;
}
}
我是新的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;
}
干的方式好多了
是传递$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);
}
干的方法
一般来说，一个简单的技巧就是去掉引号。
@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
