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

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

Mary-Kate Olsen

リリース： 2024-11-07 13:18:03

オリジナル

533 人が閲覧しました

How can I achieve dynamic property names in LESS to apply cross-browser vendor prefixes?

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:&quot;&quot;) {
    @inject:~&quot;@{rest} -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value};&quot;;
}

.test(@nextclass){
    .vendors(transform, &quot;matrix(2,0,0,2,20,20)&quot;);
    .vendors(transform-origin,&quot;10px 10px&quot;, @inject);
    (~&quot;{@{inject}} .@{nextclass}&quot;) {/*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 サイトの他の関連記事を参照してください。