LESS で動的プロパティ名を実現して、ブラウザー間でベンダー プレフィックスを適用するにはどうすればよいですか?

LESS のプロパティ名の変数

LESS のような CSS プリプロセッサを使用すると、変数とロジックに基づいて CSS を動的に生成できます。一般的なタスクの 1 つは、CSS プロパティにクロスブラウザ ベンダー プレフィックスを適用する CSS ルールを作成することです。

LESS 動的プロパティ名

LESS は現在、動的プロパティ名の直接サポートを提供していません。ただし、回避策を使用して同様の機能を実現できます。

回避策 1: e() と @{ } を使用する

1.6 より前の LESS バージョンでは、e() と @{ } を使用できます。プロパティ名を動的に挿入するには:

.vendor(@property, @value) {
    -webkit-#{e(@property)}: @value;
       -moz-#{e(@property)}: @value;
        -ms-#{e(@property)}: @value;
         -o-#{e(@property)}: @value;
            #{e(@property)}: @value;
}

/*example*/
.test {
    .vendor(transform, translateX(20px));
}

回避策 2: 次のクラスへのプロパティの挿入

再帰を使用して次のクラスの名前にプロパティを挿入することもできます:

.vendors(@property, @value, @rest:"") {
    @inject:~"@{rest} -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value};";
}

.test(@nextclass){
    .vendors(transform, "matrix(2,0,0,2,20,20)");
    .vendors(transform-origin,"10px 10px", @inject);
    (~"{@{inject}} .@{nextclass}") {/*next class properties*/};
}

.this-class{
    .test(next-class);
}

LESS 1.6 のプロパティ名の補間

LESS バージョン 1.6 では、プロパティ名の補間が直接実装されています:

.vendor(@property, @value){
    -webkit-@{property}: @value;
       -moz-@{property}: @value;
        -ms-@{property}: @value;
         -o-@{property}: @value;
            @{property}: @value;
}

/*example*/
.test {
    .vendor(transform, translateX(20px));
}

以上がLESS で動的プロパティ名を実現して、ブラウザー間でベンダー プレフィックスを適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。