使用可选参数制作Sass mixin

Question

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

Answer 1

干嘛的做法

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

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

在这里选择了这个:将一个列表传递给mixin作为SASS的单个参数

Answer 2

一个更好的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);
}

Answer 3

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

Answer 4

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

如这里的答案所示

Answer 5

老问题,我知道,但我认为这仍然是相关的.可以说,更明确的方法是使用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的答案,但我认为明确命名的函数比字符串插值语法更少混淆.

Answer 6

我知道它不是你正在搜索的答案,但你可以"null"在@include box-shadowmixin 时作为最后一个参数传递,就像这样@include box-shadow(12px, 14px, 2px, green, null);现在,如果该参数只是该属性中的一个而不是该属性(及其(默认)值)将不会被编译.如果该"行"上有两个或多个args,那么只有那些你无法编译的args(你的情况).

CSS输出完全符合您的要求,但您必须编写您的nulls :)

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

Answer 7

这是我使用的解决方案,附注如下:

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

Answer 8

甚至更干燥！

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