是否有一种在LESS中添加供应商前缀的通用方法？

Question

我目前有一个mixins.less文件，几乎所有的mixin基本相同：

.border-radius(@radius) {
  -webkit-border-radius: @radius;
   -khtml-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.box-shadow(@value) {
  -webkit-box-shadow: @value;
   -khtml-box-shadow: @value;
     -moz-box-shadow: @value;
          box-shadow: @value;
}

有没有办法创建某种通用mixin，我可以像这样调用：

.vendor('border-radius', '3px');
.vendor('box-shadox', '10px 10px');

哪个会产生与上面相同的结果？

Answer 1

注意：

建议停止依赖此技术并考虑使用专用的前缀工具（例如Autoprefixer，-prefix-free等）。通过CSS预处理器mixins（Less，SCSS或其他）硬编码供应商前缀现在是一种纯粹的反模式，被认为是有害的。自动前缀工具将使您的代码清晰，可读，面向未来，易于维护/可自定义。

例如参见：less-plugin-autoprefix

---

原始答案：

好吧，目前LESS不支持“属性名称插值”，所以你不能在属性名中使用变量。然而，有一个黑客：How to pass a property name as an argument to a mixin in less 因此，如果您不介意输出CSS中的“虚拟”属性，请转到：

.property_(@property, @value) {
    _: ~"; @{property}:" @value;
}

.vendor(@property, @value) {
    .property_('-webkit-@{property}', @value);
    .property_( '-khtml-@{property}', @value);
    .property_(   '-moz-@{property}', @value);
    .property_(          @property,   @value);
}

#usage {
    .vendor(border-radius, 3px);
    .vendor(box-shadow, 10px 10px);
}

输出：

#usage {
  _: ; -webkit-border-radius: 3px;
  _: ; -khtml-border-radius: 3px;
  _: ; -moz-border-radius: 3px;
  _: ; border-radius: 3px;
  _: ; -webkit-box-shadow: 10px 10px;
  _: ; -khtml-box-shadow: 10px 10px;
  _: ; -moz-box-shadow: 10px 10px;
  _: ; box-shadow: 10px 10px;
}

---

更新

Less v1.6.0引入了Property Interpolation功能，所以现在你不再需要任何黑客攻击了：

.vendor(@property, @value) {
    -webkit-@{property}: @value;
     -khtml-@{property}: @value;
       -moz-@{property}: @value;
            @{property}: @value;
}

#usage {
    .vendor(border-radius, 3px);
    .vendor(box-shadow, 10px 10px);
}