在 LESS 中生成供应商前缀答案

【问题标题】：Generating vendor prefixes in LESS在 LESS 中生成供应商前缀
【发布时间】：2015-06-07 05:31:37
【问题描述】：

我将这种方法拼凑在一起，用于使用 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);
        }
    }
});

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

【问题讨论】：

标签： css less prefix vendor

【解决方案1】：

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

尝试使用像Myth这样的css-postprocessor，它具有自动前缀功能。

【讨论】：