干的方式

而且,一般来说,一个巧妙的技巧来删除引号。

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

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

在这里捡到这个: pass a list to a mixin as a single argument with SASS

一个更好的干法

$args... 到 @mixin . $args 在 @input 像这样:

@mixin box-shadow($args...) {
  -webkit-box-shadow: $args;
  -moz-box-shadow: $args;
  box-shadow: $args;
}

现在,通过传递所有需要的参数,可以在每个类中重用框阴影:

.my-box-shadow {
  @include box-shadow(2px 2px 5px #555, inset 0 0 0);
}

Sass支持 @if documentation .)

你可以这样写你的混音:

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

可以将带有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);

如答案所示 here

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

我知道这不是你想要的答案,但你可以通过 "null" 作为最后一个参数 @include box-shadow 混合,像这样 @include box-shadow(12px, 14px, 2px, green, null); 现在,如果该参数只是该属性中的一个参数,那么该属性(及其(默认)值)将不会被编译。如果该“行”上有两个或多个参数,则只有那些为null的参数不会被编译(您的案例)。

CSS输出完全是您想要的,但是您必须编写 null s:)

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

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

• 允许传递可变数量的参数
• 定义懒惰的默认值

即使这样!

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

与sass@3.4.9:

// declare
@mixin button( $bgcolor:blue ){
    background:$bgcolor;
}

而使用没有价值,按钮将是蓝色的

//use
.my_button{
    @include button();
}

如果有值,按钮将变为红色

//use
.my_button{
    @include button( red );
}

@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

@mixin box-shadow($top, $left, $blur, $color, $inset: none) { ....

现在,如果未传递$inset,则不会显示任何内容。

始终可以为可选参数指定null。这里有一个简单的解决方法

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

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