在LESS中生成供应商前缀 [英] Generating vendor prefixes in LESS

问题描述

我已经拼凑了这种方法来生成供应商前缀的属性和使用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'它用于生成供应商前缀关键帧的参数。它还传递一个'@vendor'参数到'.frames'混合，所以你可以添加供应商特定的属性。例如：

  .keyframes（slideout; {
 .frames（@vendor）{
 0％{ 
 @ {vendor} transform：translate（0px，0px）; 
} 
 100％{
 @ {vendor} transform：translate（100px，0px）; 
 } 
} 
}）; 
  

这样做有效，但是有没有更好的方法？

尝试使用LESS中的供应商前缀，但是更好的工具已经存在。 css-postprocessor like Myth ，它具有自动前缀功能。

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?

解决方案

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.

这篇关于在LESS中生成供应商前缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！