使用可选参数创建Sass 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-box-shadow（$top、$left、$blur、$color、$inset:）{
-webkit盒阴影：$top$left$blur$color$inset；
-moz盒阴影：$top$left$blur$color$inset；
长方体阴影：$top$left$blur$color$inset；
}

调用时，我真正想要的是，如果未传递任何

$inset

值，则不会输出任何内容，而不是编译为如下内容：

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

-webkit盒阴影：2px 2px 5px#555555“；
-莫兹盒阴影：2px2p5px#555555英寸；
盒影：2px2p5px#555555英寸；

---

如何重写mixin，以便在没有传递

$inset

值的情况下，不会输出任何内容？

Sass支持

@if

语句。（见附件。）

你可以这样写你的混音：

@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-box-shadow（$top、$left、$blur、$color、$inset:）{
-webkit盒阴影：$top$left$blur$color{$inset}；
-moz盒阴影：$top$left$blur$color{$inset}；
框阴影：$top$left$blur$color{$inset}；
}

SASS版本3+，您可以使用

unquote（）

：

@mixin-box-shadow（$top、$left、$blur、$color、$inset:）{
-webkit盒阴影：$top$left$blur$color unquote（$inset）；
-moz盒阴影：$top$left$blur$color unquote（$inset）；
框阴影：$top$left$blur$color unquote（$inset）；
} 

---

我在这里发现了这个问题：

我知道这是一个老问题，但我认为这仍然是相关的。可以说，一种更清晰的方法是使用unquote（）函数（SASS从3.0.0版开始就使用该函数）：

---

这大致相当于Josh的答案，但我认为显式命名的函数比字符串插值语法更容易混淆。

我知道它并不完全是您要搜索的答案，但您可以在

@include box shadow

混合时将

“null”

作为最后一个参数传递，就像这样

@include box shadow（12px，14px，2px，green，null）；

现在，如果该参数在该属性中只有一个，那么该属性（及其（默认）值）将不会被编译。如果该“行”上有两个或更多参数，则只有您为null的参数不会被编译（您的案例）

CSS输出完全符合您的要求，但您必须编写

null

s:）

一种更好的干燥方式 将

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

---

以下是我使用的解决方案，并附有以下注释：

@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转换（$trans…）{
@如果长度（$trans）<1{
$trans:all.15秒放松；
}
-moz转变：$trans；
-ms转换：$trans；
-webkit转换：$trans；
过渡：$trans；
}
.用这个{
@包括过渡；
}
.使用-this-2{
@包括过渡（所有1s放松，颜色2s放松）；
}

• 宁愿将属性值作为本机css传递，也不愿靠近“舌头”
• 允许传递可变数量的参数
• 定义懒惰的默认值

---

我是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属性作为默认值，如果不传递参数，则不会对其进行解释

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

而不是这样写

@include box-shadow($top, $left, $blur, $color);

@include box-shadow($top, $left, $blur, $color, null);

如答案所示，带有sass@3.4.9:

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

而使用无值时，按钮将为蓝色

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

如果有值，按钮将为红色

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

也适用于hexa

甚至是烘干机 现在，您可以更智能地重用您的长方体阴影：

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

超级简单的方法 只需将默认值

none

添加到$inset-so

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

---

遗憾的是，SASS没有

空白

或

nil

值。顺便说一句，在查看不同的SASS限制时，我发现了一种很好的方法，可以在这些情况下去掉引号。我为它添加了一个答案。现在在2015年，你可以使用

null

跳过attr/prop

ie@include-box-shadow（$top、$left、$blur、$color、null）

正如Bob Sammers指出的，在更新版本的SASS中，您还可以使用unquote（）方法而不是#{}来删除引号。干杯。最简单的方法是使用

null

作为可选参数的默认值，而不是

”

，它们将不会在输出中呈现

@mixin-box-shadow（$top，$left，$inset:null）{}

@S.serpoosan我很好奇添加了什么版本。这在2012年肯定没有得到支持。这可能比所有其他答案都要糟糕，因为它太冗长了。另外，它很接近，可以算作一个副本。知道这一点很好，但通常情况下，更清楚地表明

mixin

所期望的参数，如

$top

，

$left

，

$blur

，等等。不过，如您所示，变量参数非常灵活。谢谢，哥们，这帮了我很多忙。我最喜欢的方法是，当你不得不回到剧本时，让每件事都简单易懂。thnx下降。这如何在现有答案（即：）上添加任何内容？他解释了如何判断是否有多个参数传递给函数，如果是，则更改输出。另一个答案不是。有时，你想定义一种全球行为。例如，在动画过渡中，您通常希望有一个非常统一的体验，并且在决定要做什么时不想冒“创造性开发人员自由裁量权”的风险。这定义了一个默认值，它可以被覆盖，但通常不会被覆盖，因为c