less - 使用 LESS mixin 添加供应商前缀

Question

我收到此混合的语法错误：

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

有什么方法可以做到这一点，或者 mixin 变量必须在 a 的右侧:吗？

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 过于复杂？

Answer 2

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

Answer 3

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

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

注意：这不起作用。

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

你也许可以使用这个库：less-properties