Parameters with commas in LESS

Let's say we have a function that creates a box shadow:

styles.less.shadow(@s) {
  box-shadow: @s;
}

As you can see, our function has one parameter. This means that we will pass all the values ​​of our shadow to this parameter, separated by a space, like this:

styles.lessdiv {
  .shadow(1px 1px red);
}

In CSS, however, you can specify multiple shadows by writing them separated by commas. In our case, unfortunately, this will not work, since the comma will be perceived by the compiler as a separator between the function parameters:

styles.lessdiv {
  .shadow(1px 1px red, 1px 1px blue); // will give an error
}

There is a way out, however. We can force LESS to treat our comma-separated string as a single parameter. To do this, we need to end the list of our values ​​with a semicolon:

styles.lessdiv {
  .shadow(1px 1px red, 1px 1px blue;);
}