Generic `vendors` mixin - less

Question

Defining vendors' mixins is common task under LESS, ie:
.box-shadow() {
-moz-box-shadow:#arguments;
-webkit-box-shadow:#arguments;
-o-box-shadow:#arguments;
-ms-box-shadow:#arguments;
box-shadow:#arguments;
}
.border-radius() {
-moz-border-radius:#arguments;
-webkit-border-radius:#arguments;
-o-border-radius:#arguments;
-ms-border-radius:#arguments;
border-radius:#arguments;
}
...
But it seems a bit repeating...
What I would like is a generic vendor mixin which do this for me, ie:
.vendors(#prop, #val) {
-moz-#prop:#val;
-webkit-#prop:#val;
-o-#prop:#val;
-ms-#prop:#val;
#prop:#val;
}
Then defining box-shadow mixin would as simple as:
.box-shadow() {
.vendors(box-shadow, #arguments);
}
The problem is my .vendors mixin does not compile...
I tried:
.vendors(#prop, #val) {
-moz-#prop: #val; /* Error */
~"-moz-#{prop}": #val; /* Error */
~`"-moz-#{prop}": #val; /* Error */
}
Do you have an idea on how to do this?
Cheers

Answer 1

Stylus has this, which is called Interpolation, eg:
vendor(prop, args)
-webkit-{prop} args
-moz-{prop} args
{prop} args
border-radius()
vendor('border-radius', arguments)
box-shadow()
vendor('box-shadow', arguments)
— Then,
button
border-radius 1px 2px / 3px 4px
yields to:
button {
-webkit-border-radius: 1px 2px / 3px 4px;
-moz-border-radius: 1px 2px / 3px 4px;
border-radius: 1px 2px / 3px 4px;
}
\o/

Answer 2

Another option, that I think is a little cleaner, would be do create a list of vendors and then iterate over that list to create the particular styles you want. Here's an example:
ALLVENDORS = webkit moz o ms w3c
vendors(prop, args)
for vendor in ALLVENDORS
if vendor == w3c
{prop}: args
else
-{vendor}-{prop}: args
This creates a list of vendors that you want to support and then allows you to reuse them. if later, you decide you want to support another prefix or want to remove one, all you have to do is remove it from the list.
And then you would use the list just as shown above:
border-radius()
vendors(border-radius, arguments)
box-shadow()
vendor(box-shadow, arguments)

Answer 3

I'm pretty sure less now has it. I've used this code in a Meteor.js project:
.vendor(#property, #value) {
-webkit-#{property}: #value;
-khtml-#{property}: #value;
-moz-#{property}: #value;
-ms-#{property}: #value;
-o-#{property}: #value;
#{property}: #value;
}
.vertical-align {
position: relative;
top: 50%;
.vendor(transformY, -25%);
}