css - SCSS: multiple box-shadow declaration in mixin -


i have following mixin box-shadow:

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

it works fine if use this, example:

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

but how can chain 2 shadows?

eventually want have css that, example:

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

i tried following code:

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

but didn't work. so, possible?

a simple solution change mixin use variable parameter. this.

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

this allow use commas in arguments.

and use mixin this:

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

Comments

Popular posts from this blog

matlab - error with cyclic autocorrelation function -

django - (fields.E300) Field defines a relation with model 'AbstractEmailUser' which is either not installed, or is abstract -

c# - What is a good .Net RefEdit control to use with ExcelDna? -