使用LESS mixin添加供应商前缀

Question

我使用这个混合（mix-in）时出现了语法错误：

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

有没有办法实现这个，或者混入变量必须在冒号的右侧？

- Artur Sapek

---

这个关于LESS前缀的答案展示了为什么你可能不想这样做，以及在LESS中模式匹配如何有益于前缀。 - ScottS

Answer 1

自Less v2起，您可以使用autoprefix插件对属性进行前缀处理，这似乎是一个更好的选择。autoprefix插件会添加浏览器前缀，利用autoprefixer后处理器。对于客户端编译（在浏览器中），您可以使用-prefixfree。

正如@ScottS 在这里已经提到的，自Less v1.6起，您可以在选择器中使用变量插值，这使得您可以执行以下操作：

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

输出：

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

你还应该阅读：我是否为厂商前缀过度复杂化了我的LESS？

- Bass Jobsen

Answer 2

那是一个无力的回答，但我认为这是不可能的。

- Christoph Leiter

---

这是一个非常好的问题，因为在SASS中是可能的，我也正在尝试用Less来模仿它，但是我还没有找到任何解决方案。因为我和提问者一样无知。 - formigarafa

Answer 3

目前还没有这种方法，但是有一些变通的方法。如果有这样的方法，我想它会是这个样子：

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

注意：这个不起作用。

关于这个主题，这里有一个非常长的讨论：https://github.com/cloudhead/less.js/pull/698

你可能可以利用这个库：less-properties

- posit labs