我写的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传递的值,没有输出?


当前回答

老问题了,我知道,但我认为这仍然是相关的。可以说,更清晰的方法是使用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的回答,但我认为显式命名的函数比字符串插值语法更容易混淆。

其他回答

你总是可以把空赋给你的可选参数。这里有一个简单的解决方法

@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;
}

我是新的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;
}

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 transition($trans...) {
  @if length($trans) < 1 {
    $trans: all .15s ease-out;
  }
  -moz-transition: $trans;
  -ms-transition: $trans;
  -webkit-transition: $trans;
  transition: $trans;
}

.use-this {
  @include transition;
}

.use-this-2 {
  @include transition(all 1s ease-out, color 2s ease-in);
}

更喜欢将属性值作为原生CSS传递,以接近“舌头” 允许传递可变数量的参数 为惰性定义一个默认值

干的方式好多了

是传递$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);
}