Question

我已经将这种方法拼凑在一起，使用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，以便您可以添加特定于供应商的属性。 e.g：

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

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

Answer 1

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

尝试使用Myth之类的css后处理器，它具有自动添加前缀功能。

在LESS中生成供应商前缀

1 个答案: