LESS でプロパティ名に変数を使用する方法: 動的プロパティまたはプロパティ名補間?

LESS でのプロパティ名での変数の使用 (動的プロパティ / プロパティ名補間)

LESS を使用する場合、動的な値に基づいて CSS プロパティ名をカスタマイズするのが困難になる場合があります。この質問では、動的なプロパティと値を受け入れるベンダー固有の CSS ミックスインをレプリケートする場合の制限と回避策について説明します。 Sass では、このようなミックスインはプロパティ名補間を利用します。

LESS の制限:

現在、LESS には動的なプロパティ名生成のサポートが組み込まれていません。これにより、ベンダー プレフィックス ミックスインを LESS で直接複製することができなくなります。

回避策:

この制限にもかかわらず、次の回避策は代替方法を提供します。

1.動的に生成されたプロパティをプロパティ値に注入:

動的プロパティと値を「vendor」などの汎用プロパティにラップし、それらを別のプロパティの値に注入します。プロパティ。

例:

2.動的に生成されたプロパティを次のクラスの名前に挿入します:

ベンダー ミックスインの概念を拡張します。後のクラスが名前にベンダー ルールを挿入する複数のクラスを作成します。

例:

LESS v1.4.0 のアップグレードされた回避策:

以上がLESS でプロパティ名に変数を使用する方法: 動的プロパティまたはプロパティ名補間?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。