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」関数には、引数の 1 つとして「.frames」ミックスインがあり、これを使用してベンダー プレフィックス付きキーフレームを生成します。また、'@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 に答える