使用 LESS mixin 添加供应商前缀答案

【问题标题】：Adding vendor prefixes with LESS mixin使用 LESS mixin 添加供应商前缀
【发布时间】：2012-09-14 06:52:05
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

注意：这不起作用。

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

【讨论】：

【解决方案3】：

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

【讨论】：