3

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 :?

Harry
  • 87,580
  • 25
  • 202
  • 214
Artur Sapek
  • 2,425
  • 6
  • 27
  • 29
  • 2
    [This answer](http://stackoverflow.com/questions/14920935/less-css-escape-entire-css-rule-with-different-prefixes/14943680#14943680) for LESS prefixing shows why you might not want to do this, and how pattern matching in LESS can be beneficial in prefixing. – ScottS Feb 18 '13 at 19:22

3 Answers3

5

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?

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
1

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

Christoph Leiter
  • 9,147
  • 4
  • 29
  • 37
  • It's a very good question because that is possible in SASS and I am trying to mimmic that with Less ass well And I couldn't find any solution yet. Because I am as lame as anyone who know where the question came from. – formigarafa Mar 14 '14 at 06:01
0

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

posit labs
  • 8,951
  • 4
  • 36
  • 66