SCSS：中混入多的box-shadow聲明

Question

我有箱陰影下混入：

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

但沒有奏效。那麼，有可能嗎？

Answer 1

一個簡單的解決方案是將您的mixin更改爲使用可變參數。 就是這樣。

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

這將允許您在參數中使用逗號。

而且你會使用這樣的混入：

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

Answer 2

是的，這是可能的。請參閱下面的文章以獲得更好的解釋 http://www.entheosweb.com/tutorials/css/multiple_shadows.asp