SCSS: multiple box-shadow declaration in mixin

Question

I have a following mixin for 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 I use it like this, for example:

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

But how can I chain 2 shadows?

Eventually I want to have a CSS like that, for 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 it with the 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 that didn't work. So, is it possible?

Answer 1

A simple solution would be to change your mixin to use a variable parameter. Something like this.

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

This would allow you to use commas in the arguments.

And you would use the mixin like this:

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