Generating vendor prefixes in LESS

Question

I've pieced together this approach for generating vendor-prefixed properties and animations using LESS. First some factory functions:

.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(~'') }
}

The '.vendorprefix' function can be used for general purpose properties including setting animations, e.g:

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

The '.keyframes' function has a '.frames' mixin as one of its arguments which it uses to generate vendor prefixed keyframes. It also passes a '@vendor' argument to the '.frames' mixin so you can add vendor specific properties. e.g:

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

This does work, but does anyone have a better method?

Answer 1

You can implement vendor-prefixing in LESS, but far better tools already exist.

Try to use css-postprocessor like Myth, it has auto-prefixing feature.