使用可选参数制作 Sass mixin [英] Making a Sass mixin with optional arguments

问题描述

我正在写这样的 mixin:

I am writing a mixin like this:

@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 值，则不会输出任何内容，而不是编译为这样的内容:

When called what I really want is that if no $inset value is passed, nothing is output, rather than it compiling to something like this:

-webkit-box-shadow: 2px 2px 5px #555555 "";
-moz-box-shadow: 2px 2px 5px #555555 "";
box-shadow: 2px 2px 5px #555555 "";

如何重写mixin，以便如果没有传递$inset 的值，则不输出任何内容?

How do I rewrite the mixin so that if there is no value of $inset passed, nothing is output?

推荐答案

一种干的方式

而且，一般来说，这是删除引号的巧妙技巧.

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

从这里选择:使用 SASS 将列表作为单个参数传递给 mixin

这篇关于使用可选参数制作 Sass mixin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！