Generic `vendors` mixin

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%);
}