Adding vendor prefixes with LESS mixin

Question

I'm getting a Syntax Error for this mix-in:

.vendors(@statement){
  @statement;
  -moz-@statement;
  -webkit-@statement;
}

Any way to do this, or do mixin variables have to be on the right side of a :?

Answer 1

That's a lame answer, but I don't think it's possible.

Answer 2

Since Less v2 you can use the autoprefix plugin to prefix your properties, which seems to be a better alternative. The autoprefix plugin add browser prefixes leveraging the autoprefixer postprocessor. For client side compiling (in the browser) you can use -prefixfree.

As already mentioned by @ScottS here you can use variable interpolation in selectors since Less v1.6, which enables you to do:

.prefix(@property, @value)
{
    -webkit-@{property}:@value;
    @{property}:@value;
}
selector {
    .prefix(property,value);
}

outputs:

selector {
  -webkit-property: value;
  property: value;
}

You should also read: Am I overcomplicating my LESS for vendor prefixes?

Answer 3

There's no way to do that, but there are workarounds. If it worked, I think it would be something like this:

.vendors(@prop, @val){
  ~"-webkit-@{prop}:@{val}";
}

Note: this doesn't work.

Here's a very long discussion on the topic: https://github.com/cloudhead/less.js/pull/698

You might be able to make use of this library: less-properties