SCSS：mixin 中的多个 box-shadow 声明答案

【问题标题】：SCSS: multiple box-shadow declaration in mixinSCSS：mixin 中的多个 box-shadow 声明
【发布时间】：2016-11-06 05:54:37
【问题描述】：

我有以下 box-shadow 的 mixin：

@mixin box-shadow($horizontal, $vertical, $blur, $spread, $r, $g, $b, $a, $inset:"") {
    -webkit-box-shadow: $horizontal $vertical $blur $spread rgba($r, $g, $b, $a) unquote($inset);
    box-shadow: $horizontal $vertical $blur $spread rgba($r, $g, $b, $a) unquote($inset);
}

如果我这样使用它就可以正常工作，例如：

@include box-shadow(0px, 2px, 4px, 0px, 0, 0, 0, 0.4)

但是我怎样才能链接 2 个阴影呢？

最终我想要一个这样的 CSS，例如：

-webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4), 0px 0px 6px 2px rgba(255,255,255,0.5) inset;

我用下面的代码试了一下：

@include box-shadow(0px, 2px, 4px, 0px, 0, 0, 0, 0.4), box-shadow(0px, 0px, 6px, 2px, 255, 255, 255, 0.5, inset);

但这没有用。那么，有可能吗？

【问题讨论】：

标签： css sass scss-mixins

【解决方案1】：

是的，这是可能的。请参阅下面的文章以获得更好的解释 http://www.entheosweb.com/tutorials/css/multiple_shadows.asp

【讨论】：

【解决方案2】：

一个简单的解决方案是将您的 mixin 更改为使用可变参数。像这样的。

@mixin box-shadow($params...) {
  -webkit-box-shadow: $params;
  -moz-box-shadow: $params;
  box-shadow: $params;
}

这将允许您在参数中使用逗号。

你会像这样使用 mixin：

@include box-shadow(0px 2px 4px 0px rgba(0, 0, 0, 0.4), 0px 0px 6px 2px rgba(255,255,255,0.5)) ;

【讨论】：