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
Post a Comment