1. 首页
  2. 问题
  3. 使用可选参数制作 Sass mixin
小编典典

使用可选参数制作 Sass mixin

all

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


阅读 84

收藏
2022-06-20

共1个答案

小编典典

DRY’r 的做法

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

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