174

我正在写一个这样的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 的值，则不输出任何内容？

13 回答

228

干嘛的做法

而且，通常，删除引号的巧妙技巧 .

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

在这里挑选了这个：pass a list to a mixin as a single argument with SASS

回复于 2024-05-08T18:59:13+08:00

20
一个更好的DRY方式

是将 $args... 传递给 @mixin . 那样，不管你会通过多少 $args . 在 @input 调用中，您可以传递所需的所有参数 . 像这样：
```
@mixin box-shadow($args...) {
  -webkit-box-shadow: $args;
  -moz-box-shadow: $args;
  box-shadow: $args;
}
```
现在，您可以通过传递所有需要的args在您想要的每个类中重用您的box-shadow：
```
.my-box-shadow {
  @include box-shadow(2px 2px 5px #555, inset 0 0 0);
}
```
回复于 2024-05-08T18:59:13+08:00

Sass支持 @if 语句 . （见documentation . ）

你可以这样写你的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;
  }
}

回复于 2024-05-08T18:59:13+08:00

您可以将属性设置为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所示

回复于 2024-05-08T18:59:13+08:00

12
老问题，我知道，但我认为这仍然是相关的 . 可以说，更明确的方法是使用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的答案，但我认为明确命名的函数比字符串插值语法更少混淆 .
回复于 2024-05-08T18:59:13+08:00
1
我知道它不是你要搜索的答案，但你可以将 "null" 作为最后一个参数传递给 @include box-shadow mixin，就像这样 @include box-shadow(12px, 14px, 2px, green, null); 现在，如果那个参数只是该属性中的一个而不是那个属性（和它的（默认）值）赢了't get compiled. If there are two or more args on that 1155270 only ones that you nulled won'编译（你的情况） .

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;
```
回复于 2024-05-08T18:59:13+08:00

这是我使用的解决方案，附注如下：

@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传递以保持接近"the tongue"
允许传递可变数量的参数
定义懒惰的默认值

回复于 2024-05-08T18:59:13+08:00

使用sass@3.4.9：

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

并且无值使用，按钮将为蓝色

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

并且有 Value ，按钮将为红色

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

也适用于hexa

回复于 2024-05-08T18:59:13+08:00

甚至DRYer方式！

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

回复于 2024-05-08T18:59:13+08:00

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

回复于 2024-05-08T18:59:13+08:00

0
超级简单的方法

只需将 none 的默认值添加到$ inset中即可
```
@mixin box-shadow($top, $left, $blur, $color, $inset: none) { ....
```
现在没有传入$ inset时，将不会显示任何内容 .
回复于 2024-05-08T18:59:13+08:00

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

回复于 2024-05-08T18:59:13+08:00

您始终可以为可选参数指定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;
}

回复于 2024-05-08T18:59:13+08:00

使用可选参数制作Sass mixin

13 回答

干嘛的做法

SASS版本3，你可以使用unquote（）：

一个更好的DRY方式

甚至DRYer方式！

超级简单的方法

相关问题