我已经将这种方法拼凑在一起，使用 LESS 生成供应商前缀的属性和动画。首先是一些工厂函数：

.vendorprefix (@property, @value) {
    -webkit-@{property}: @value;
    -moz-@{property}: @value;
    -ms-@{property}: @value;
    -o-@{property}: @value;
    @{property}: @value;
}

.keyframes(@name; @animation) {
    @animation();
    @-webkit-keyframes @name { .frames(-webkit-) }
    @-moz-keyframes @name { .frames(-moz-) }
    @-o-keyframes @name { .frames(-o-) }
    @keyframes @name { .frames(~'') }
}

“.vendorprefix”函数可用于通用属性，包括设置动画，例如：

.element {
    .vendorprefix(animation; slideout 1s);
}

'.keyframes' 函数有一个 '.frames' mixin 作为其参数之一，它用于生成供应商前缀的关键帧。它还将“@vendor”参数传递给“.frames”mixin，以便您可以添加供应商特定的属性。例如：

.keyframes (slideout; {
    .frames(@vendor) {
        0% {
            @{vendor}transform: translate(0px, 0px);
        }
        100% {
            @{vendor}transform: translate(100px, 0px);
        }
    }
});

这确实有效，但是有人有更好的方法吗？

您可以在 LESS 中实现供应商前缀，但已经存在更好的工具。

尝试使用 css-postprocessor 像Myth http://www.myth.io/，它具有自动前缀功能。