使用LESS mixin添加供应商前缀

Question

我收到了这个混音的语法错误：

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

任何方式这样做，或者mixin变量必须位于:的右侧？

Answer 1

由于Less v2，您可以使用autoprefix plugin为您的属性添加前缀，这似乎是一个更好的选择。 autoprefix插件添加了利用autoprefixer postprocessor的浏览器前缀。对于客户端编译（在浏览器中），您可以使用-prefixfree。

正如@ScottS here已经提到的那样，你可以在选择器中使用变量插值，因为Less v1.6可以让你做到：

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

输出：

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

您还应该阅读：Am I overcomplicating my LESS for vendor prefixes?

Answer 2

这是一个蹩脚的答案，但我认为这不可能。

Answer 3

没有办法做到这一点，但有一些解决方法。如果它有效，我认为它会是这样的：

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

注意：这不起作用。

以下是关于该主题的长篇讨论：https://github.com/cloudhead/less.js/pull/698

您可以使用此库：less-properties