0

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

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

4

1 回答 1

-1

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

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

于 2015-04-02T10:30:57.213 回答