How to specify multiple CSS property values ​​in LESS?

Question

css

Good afternoon!
In general, the essence of the question is this: There is a code

.b-shadow (@type:0, @x: 0, @y: 0, @blur: 0, @color: #fff) when (@type=0) {
    box-shadow: @x @y @blur @color;
    -moz-box-shadow: @x @y @blur @color;
    -webkit-box-shadow: @x @y @blur @color;
    filter: progid:DXImageTransform.Microsoft.dropshadow([email protected], [email protected], color=@color);
  }
  .b-shadow (@type, @x: 0, @y: 0, @blur: 0, @color: #fff) when (@type = inset){
    box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
  }

Everything seems to be clear here, but there is one thing. And if the block has not 1 shadow, but 2, what to do?
Recording in a row will not work, because the last record will overwrite the previous one.
Using the alleged "+" function does not help either, since I write the code:

.b-shadow(0, 0, 5px, 0, #51bad7);
    box-shadow+: 0 10px 15px rgba(0,0,0,0.2);

Naturally, after adding "+" before the description of the values:

.b-shadow (@type:0, @x: 0, @y: 0, @blur: 0, @color: #fff) when (@type=0) {
    box-shadow+: @x @y @blur @color;
    -moz-box-shadow+: @x @y @blur @color;
    -webkit-box-shadow+: @x @y @blur @color;
    filter: progid:DXImageTransform.Microsoft.dropshadow([email protected], [email protected], color=@color);
  }
  .b-shadow (@type, @x: 0, @y: 0, @blur: 0, @color: #fff) when (@type = inset){
    box-shadow+: @arguments;
    -moz-box-shadow+: @arguments;
    -webkit-box-shadow+: @arguments;
  }

as a result I get:

box-shadow: 0 5px 0 #51bad7, 0 10px 15px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 0 #51bad7;
  -webkit-box-shadow: 0 5px 0 #51bad7;

Why isn't the second shadow added to prefixed properties?
And how do you deal with such issues?
I wanted to write a function to first collect @arg, and then substitute it in the properties, but I can’t find something how to add lines in the documentation.

Answer 1

Personally, I do it a little differently.

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

With this view, you can put as many shadows as you like.

.class1 { .shadow(~"1px 2px red, inset 5px 5px green");}

Answer 2

Thank you!
Itself did not think that it is possible to transfer at once all arguments in the form of a line.